@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Playfair+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..600;1,100..600&display=swap');

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

:root {
    --lps-light-blue: #0071b8;
    --lps-dark-blue: rgb(0, 92, 153);
    --lightblue-background: #c5e9ff;
    --shadow-color: rgba(0, 0, 0, 0.199);
    --standard-box-shadow: 0px 0px 5px rgb(202, 202, 202);
    --line-color: rgba(206, 227, 239, 1);
    --dark-red: rgb(197, 0, 0);
}

/** SCROLL BAR  **/
::-webkit-scrollbar {
    width: 5px;
}

/* Scroll Bar Track */
::-webkit-scrollbar-track {
    background: white;


}

/* Scroll Bar Handle */
::-webkit-scrollbar-thumb {
    /* background: #0071b8; */
    background: black;
}

/* Scroll Bar Handle on hover */
::-webkit-scrollbar-thumb:hover {
    /* background: #00588f; */
    background: grey;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;


}

body {
    overflow-x: hidden;
    /* overflow-y: scroll; */
    font-size: 19px;
    line-height: 1.5rem;
    color: black;
    background-color: black;
    font-family: 'Josefin Sans', Sans-Serif, Arial;
    font-weight: 330;
    margin: 0;
    padding: 0;
    margin-top: 0;
    padding-top: 0;
    -webkit-text-size-adjust: none;
}

p {
    margin-bottom: 1.1em;
    margin-top: 1.1em;
    line-height: 1.5em;
}

strong {
    font-weight: 600;
}

a,
a:link,
a:visited {
    text-decoration: none;
    color: rgb(0, 87, 145);
    font-weight: 600;
    line-height: 1.5em;
    min-height: 24px;
}

a:hover,
a:visited:hover,
a:focus {
    text-decoration: underline;
}

hr {
    height: 1px;
    background-color: var(--line-color);
    border-width: 0px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

h3,
h4,
h5,
h6 {
    color: #002942;
}

/* very top of the page for AA compliance */
h1 {
    color: black;
    text-align: center;
}

/* district homepage top messages and page titles*/
h2 {
    margin: 0px;
    font-size: 1.3rem;
    font-weight: bold;
}

/* h3 page titles*/
h3 {
    display: block;
    width: 100%;
    font-size: 1.8rem;
    font-weight: normal;
    text-align: center;
    margin-top: 10px;
    line-height: 1.8rem;
}

/* h4 is used in subheadings and infobox headings */
h4 {
    display: block;
    width: 100%;
    font-size: 1.2em;
    font-weight: normal;
    margin-top: 1em;
    margin-bottom: 1em;
}

/* h4 is used on BOE Policies page */
h5 {
    display: block;
    width: 100%;
    font-size: 1.3rem;
    font-weight: normal;
}


h6 {
    font-size: 1em;
    margin: 0px;
    padding: 0px;
    display: inline;
    font-weight: bold;
}

td {
    vertical-align: top;
    padding: 0px;
}

img {
    border-style: none;
    margin: 0px;
    padding: 0px;
}

ul {
    padding-left: 0px;
    margin-bottom: 1rem;
    list-style-type: none;
}

li {
    margin-top: 1.1em;
    margin-bottom: 1.1em;
}

legend {
    color: black;
    background-color: transparent;
    padding-right: 5px;
    /*font-size: 11pt;*/
    font-weight: bold;
}

form {
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0px solid black;
}

form>div {
    margin-bottom: 20px;
    border: 0px solid black;
}

input[type=text],
select,
textarea {
    width: 100%;
    font-size: 1em;
    font-family: 'Montserrat', helvetica, arial, sans-serif;
    border: 1px solid #c5c5c5;
    border-radius: 5px;
}

input[type=text]:focus {
    background-color: #fffcda;
    border: 2px solid rgb(0, 92, 153);

}

input[type="button"],
input[type="submit"],
.g-recaptcha {
    margin: auto;
    padding: 20px;
    display: block;
    font-size: 19px;
    color: white;
    background-color: #004280;
    border: 0px;
    border-radius: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    box-shadow: 0px 0px 15px rgb(202, 202, 202);
    cursor: pointer;
    width: 95vw;
    max-width: 400px;
}

input[type="button"]:hover,
input[type="submit"]:hover,
.g-recaptcha:hover {
    background-color: rgb(3, 104, 0);
    box-shadow: 0px 0px 15px rgb(251, 253, 110);
}

select {
    color: white;
    background-color: #0054a4;
}

textarea {
    height: 5rem;
}

nav {
    width: 100%;
    margin-top: 0px;
}

/* iframe {
    width: 100%;
    height: calc(100vw / 3.6);    
    display: block;
    margin: auto;
    border: 15px solid #E4E4E4;
    border-radius: 10px;
    max-height:373px;
    max-width: 640px;
} */

#unsupported-browser-message {
    display: none;
    background-color: rgb(251, 255, 4);
    text-align: center;
    padding: 20px;
}

#bypassBlocks {
    height: 0px;
    overflow-y: hidden;
}

#skiplink {
    color: white;
    font-size: .8rem;
}



/* HEADER */
#header {
    position: relative;
    z-index: 99;
    width: 100vw;
    vertical-align: top;
    margin: 0px;
    border: 0px solid red;
}

#header #print-header {
    display: none;
}

#header #black-bar {
    display: none;

}

#header #blue-bar #blue-bar-content #header-quick-links {
    display: none;
}

#header #blue-bar {
    height: 70px;
    background-color: #00417F;
    color: #ffffff;
    border: 0px solid red;
}

#header #blue-bar #blue-bar-content {
    max-width: 1600px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    color: #E4E4E4;
    -padding: 5px;
    border: 0px solid red;
}

#header #blue-bar #blue-bar-content div {
    border: 0px solid red;
}

#header #blue-bar #blue-bar-content a:link,
#header #blue-bar #blue-bar-content a:visited {
    background-color: transparent;
    color: #E4E4E4;

}

#header #blue-bar #blue-bar-content #header-lps-logo {
    display: none;
}

#header #blue-bar #blue-bar-content #levittown-public-schools img {
    height: auto;
    width: 240px;
}

#header #blue-bar #blue-bar-content #mobile-search {
    width: 60px;

    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 0px solid red;

}

#header #blue-bar #blue-bar-content #mobile-search div {
    position: absolute;
    z-index: 99;
    top: 70px;
    left: 0px;
    width: 100%;
    height: 70px;
    background-color: white;
    border-bottom: 1px solid gray;
    text-align: center;
    box-shadow: 0px 22px 20px rgba(0, 0, 0, 0.3);
    display: none;
}

#header #blue-bar #blue-bar-content #mobile-search form {
    margin: auto;
    margin-top: 10px;
    width: 90%;
    max-width: 1600px;
    display: flex;
    justify-content: space-between;
}

#header #blue-bar #blue-bar-content #mobile-search form label {
    display: none;
}

#header #blue-bar #blue-bar-content #mobile-search form input[type=text] {
    height: 45px;
    padding: 2px;
    flex-grow: 1;
}

/* HAMBURBER */

#header #blue-bar #blue-bar-content #hamburger-placeholder {
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    border: 0px solid black;
}

#header #blue-bar #blue-bar-content #hamburger-placeholder #hamburger {
    width: 30px;
    height: 30px;
    border: 0px solid black;
    cursor: pointer;
}

#header #blue-bar #blue-bar-content #hamburger-placeholder #hamburger .line {
    width: 90%;
    height: 5px;
    background-color: #ffffff;
    margin: auto auto;
    margin-top: 16%;
    margin-bottom: 0%;
    border-radius: 3px;
    transition: .2s ease-in;
}


#header #blue-bar #blue-bar-content #hamburger-placeholder #hamburger.menu-x .line:nth-of-type(1) {
    margin: 0;
    transform: translateY(15px) rotate(45deg);
    transition: .2s ease-in;
}

#header #blue-bar #blue-bar-content #hamburger-placeholder #hamburger.menu-x .line:nth-of-type(2) {
    visibility: hidden;
}

#header #blue-bar #blue-bar-content #hamburger-placeholder #hamburger.menu-x .line:nth-of-type(3) {
    margin: 0;
    transform: translateY(0px) rotate(-45deg);
    transition: .2s ease-in;
}

/* MAIN NAV */

#header #blue-bar #blue-bar-content #main-nav {
    position: absolute;
    z-index: 99;
    top: 70px;
    background-color: #004280;
    border-top: 1px solid #ffffff;
    border-bottom: 3px solid #004280;
    display: none;
}

#header #blue-bar #blue-bar-content #main-nav>ul {
    padding: 0px;
    margin: 0px;
    width: 100%;
    list-style-type: none;
}

#header #blue-bar #blue-bar-content #main-nav>ul>li {
    min-height: 50px;
    text-align: left;
    padding: 10px;
    margin: 0px;
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 0px;
    cursor: pointer;
    color: white;
    transition: .05s ease-in;
    border-bottom: 1px solid white;
}

#header #blue-bar #blue-bar-content #main-nav>ul>li img {
    display: none;
}

#header #blue-bar #blue-bar-content #main-nav>ul>li:nth-of-type(1) img {
    display: block;
}

#header #blue-bar #blue-bar-content #main-nav>ul>li:hover {
    background-color: #002f5c;
    text-decoration: underline;
}

#header #blue-bar #blue-bar-content #main-nav>ul>li>ul {
    display: none;
    position: absolute;
    margin: 0;
    padding: 0;
    list-style-type: none;
    padding: 0px;
    background-color: #004280;
    overflow: scroll;
    top: 0px;
    width: 50vw;
    height: 80vh;
    margin-left: 47vw;
    border-bottom: 1px solid rgb(0, 92, 153);
    box-shadow: 0px 0px 3px black;
}

#header #blue-bar #blue-bar-content #main-nav>ul>li>ul>li {
    min-height: 50px;
    padding: 0px;
    margin: 0px;
    padding: 10px;
    border-bottom: 1px solid #F0F0F0;
    transition: .1s ease-in;
}

#header #blue-bar #blue-bar-content #main-nav>ul>li>ul>li:hover {
    background-color: #002f5c;
    transition: .1s ease-in;
}

#header #blue-bar #blue-bar-content #main-nav>ul>li>ul>li>a {
    display: block;
    color: white;
    font-size: .96rem;
    font-weight: normal;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}


#header #blue-bar #blue-bar-content #main-nav>ul>li>ul>li>a img {
    max-height: 50px;
}


#header #blue-bar #blue-bar-content #main-nav #pp-learn-more {
    display: none;
}

/* END MAIN NAV */


/* HEADER DATE BAR  */

#header #date-bar {
    background-color: black;
    color: #E4E4E4;
    text-align: center;
    padding: 5px;
    font-style: italic;
    font-size: .9em;
}

#school-nav {
    display: none;
}


#school-nav {
    display: none;
}


#content {
    background-color: #ffffff;
}

/* FOOTER */

#footer {
    position: relative;
    width: 100vw;
    vertical-align: top;
    margin: 0px;
    border: 0px solid red;
    background-color: #004280;
    color: #E4E4E4;
}

#footer a,
#footer a:hover,
#footer a:visited {
    color: #E4E4E4;
}

#footer #footer-content {
    width: 100%;
    padding: 20px;
    max-width: 740px;
    color: #E4E4E4;
    margin: auto;
    text-align: center;
}

#footer #footer-content .icon-location,
#footer #footer-content .icon-phone {
    width: 20px;
}

#footer #footer-content .footer-phone-loc {
    padding: 10px;
    text-align: left;
    margin: auto;
    display: flex;
    justify-content: center;
    border: 0px solid red;
}

#footer #footer-content .footer-district-name {
    padding: 10px;

}

#footer #footer-content .footer-disclaimer {
    font-weight: 700;
    font-size: 1em;
    border: 0px solid red;
}

#footer #footer-content .footer-disclaimer div {
    padding: 3px;
}

#footer #footer-content .footer-delimiter {
    display: none;
}

#footer #footer-boilerplate {
    background-color: #000000;
    padding: 10px;
    text-align: center;
    font-style: italic;
}


/* CALENDAR POPUP*/

#calendars {
    width: 100%;
    max-width: 1300px;
    display: none;
    text-align: center;
    margin: auto;
    padding: 10px;
    border: 0px solid black;
    margin-top: 0px;
}

#calendars ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px;
    border: 0px solid black;
}

#calendars ul li {
    padding: 0;
    font-size: 1em;

}

#calendars ul li img {
    display: block;
    /* height: 7vw; */
    height: 30vw;
    max-height: 200px;

}

#text-levittown-calendars {
    height: 30px;
    margin-top: 5px;
}

#text-public-calendars {
    height: 15px;
    margin-right: 5px;
}

#text-schools-calendars {
    height: 15px;
    margin-left: 5px;
}

#no-twitter-placeholder {
    display: none;
}

/* HOMEPAGE CONTENT */

#content {
    width: 100vw;
    display: table;
    margin: auto;
    margin-top: 0px;
    border: 0px solid black;
}

.required {
    color: rgb(197, 0, 0);
    font-weight: bold;
}

/* HOMEPAGE BANNER */

.homepage-banner-image-mobile {
    max-width: 100vw;
    margin: auto auto;
    margin-top: 0px;
    display: block;
}

.homepage-banner-image-desktop {
    display: none;
}

/* HOMEPAGE IMPORTANT MESSAGES */

.homepage-important-messages {
    background-color: #f1f1f1;
}

.homepage-important-message {
    width: 100%;
    max-width: 1600px;
    margin: auto;
    text-align: center;
    padding: 15px;
    min-height: 50px;
    margin-top: 0px;
    margin-bottom: 0px;
    display: table;
}

.homepage-important-message h3,
.homepage-important-message h3 a {
    color: #bb0000;
    background-color: transparent;
}

.homepage-important-message img {
    display: none;
}

.homepage-important-message div {
    margin-top: 10px;
}

.homepage-important-message-delimiter {
    display: none;
}

/* BOE MEETING MESSAGE */

.homepage-boe-meeting-message {
    width: 100%;
    max-width: 1600px;
    margin: auto;
    text-align: center;
    padding: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    display: table;
}

.homepage-boe-meeting-message h3,
.homepage-boe-meeting-message h3 {
    color: #d90000;
    background-color: transparent;
    font-weight: bold;
    /* line-height: 1.5em; */
    text-align: center;
}

/* HOMEPAGE TOP MESSAGES*/

.homepage-top-messages {
    width: 100%;
    margin: auto;
    text-align: center;    
    margin-top: 0px;
    margin-bottom: 0px;
    display: table;
    background-color: #00417F;
    color: #E4E4E4;
}

.homepage-top-messages a {
    color: #19d600;
    background-color: transparent;
}

.homepage-top-messages h3,
.homepage-top-messages h3 a {
    color: #19d600;
    font-weight: bold;
    background-color: transparent;
    margin: 0px;
}

.homepage-top-messages .homepage-top-message {
    max-width: 1600px;
    margin: auto;
    padding: 20px;
    border-bottom: 1px solid gray;
}

.homepage-banner-article.desktop .homepage-banner-article-title {
    opacity: 0;
    position: absolute;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px;
    margin: auto;
    color: white;
    font-size: 1.2em;
    text-align: center;
    transition: .4s ease;
}

.homepage-banner-article.desktop:hover .homepage-banner-article-title {
    opacity: 1;
    transition: .4s ease;
}


/* HOMEPAGE RESOURCES */

.homepage-resources-placeholder {

    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: 1600px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0px solid red;
}

.homepage-resources {
    width: 100%;
    margin: auto;
}

.homepage-resources ul {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 0px;
    gap: 5px;
    font-weight: 1em;
    border: 0px solid red;

}

.homepage-resources li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    width: 49%;
    height: 5.5em;
    margin: 0px;
    text-align: center;
    background-color: #004280;
    border: 0px solid red;
    border-radius: 10px;
}

.homepage-resources li a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: transparent;
    color: #d4d4d4;
    font-size: 16px;
    line-height: 1.2em;
    font-style: italic;
    font-weight: bold;
    padding: 20px;
}

.homepage-resources li a .resource-caption {
    font-size: .70rem;
}

.homepage-resources li:hover {
    background-color: #2188e9;
    color: #000000;
    transition: .4s ease;
}

.homepage-resources li:hover a {
    background-color: transparent;
    color: #000000;
}

.homepage-current-resources-right-hand-ad {
    display: none;
}

/* HOMEPAGE MIDDLE ROW STUFF */

.homepage-middle-area-container {
    width: 100%;
    max-width: 1600px;
    margin: auto;
    /* margin-bottom: 10px; */
    padding: 0px;
    border: 0px solid red;
}

.homepage-middle-area-left {
    width: 100%;
    padding: 0px 10px 10px 10px;
}

.calendar-wiz-calendar {
    width: 100%;
    border-radius: 10px;
    background-color: #e7e7e7;
    padding: 10px;
}

.calendar-wiz-calendar .calendarwiz-header {
    padding: 15px;
    color: #E4E4E4;
    background-color: #004280;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-size: 1.7em;
}

.calendar-wiz-calendar .calendarwiz-header img {
    width: 30px;
    margin: 0px;
    float: none;
}

.calendar-wiz-calendar .calendarwiz-header h2 {
    margin: 10px 0px 0px 10px;
    font-size: 1.6em;
    line-height: 1em;
    font-weight: 300;
}

.calendar-wiz-calendar .calendarwiz-body {
    background-color: white;
    padding: 10px;
}

.calendar-wiz-calendar .calendarwiz-viewall {
    display: block;
    margin-top: 10px;
    width: 100%;
    padding: 15px;
    background-color: #004280;
    color: #E4E4E4;
    border-radius: 10px;
    text-align: center;
}

.homepage-middle-area-right {
    width: 100%;
    padding: 0px 10px 0px 10px;
    

}

.homepage-middle-area-right .success-at-lps-video img {
    width: 100%;
    border: 15px solid #E4E4E4;
    border-radius: 10px;
}

.homepage-middle-area-right .portrait-of-a-graduate {
    display: none;
}


.ps-pp-wdic {
    display: block;
    width: 70vw;
    margin: auto;
}

.ps-pp-wdic a {
    display: block;
}

.ps-pp-wdic a img {
    width: 100%;
    height: auto;
    margin: 15px;
}

.ps-pp-wdic {
    display: none;

}



/* HOMEPAGE BANNER NEWS ARTICLE */

.homepage-banner-article {
    margin: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    padding: 0px;
    clear: both;
    display: block;
    background-color: #ffffff;
}


.homepage-banner-article a {
    display: block;
    width: 100%;
    height: 100%;
}

.homepage-banner-article-description {
    display: none;
}

.homepage-banner-article.mobile {
    width: 100%;
    height: 66vw;
}

.homepage-banner-article.desktop {
    display: none;
}

/* HOMEPAGE NEWS ARTICLE RIBBON */

.homepage-school-news-ribbon {
    width: 100%;
    background-color: #004280;
    text-align: center;
    color: #E4E4E4;
    border: 0px solid red;
}

.homepage-school-news-ribbon-content {
    width: 100%;
    max-width: 1600px;
    margin: auto;
    border: 0px solid red;
}

.homepage-school-news-ribbon-content h2 {
    text-align: center;
    color: #E4E4E4;
    font-size: 2em;
    font-weight: 300;
    line-height: 1em;
    padding: 20px;
}

.homepage-school-news-ribbon-items {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.homepage-school-news-ribbon-item {
    display: none;
}

.homepage-school-news-ribbon-item:nth-of-type(1) {
    display: block;
}

.homepage-school-news-ribbon-item {
    width: 100%;
    color: black;
    background-color: white;
}

.homepage-school-news-ribbon-item-title {
    margin-bottom: 10px;
}

.homepage-school-news-ribbon-item-date {
    text-transform: uppercase;
    display: none;
}

.homepage-school-news-ribbon img {
    display: block;
    width: 100% !important;
    height: auto !important;
}

.covid-info {
    background-color: rgb(255, 231, 231);
}

.SandboxRoot.env-bp-min .timeline-Tweet-text {
    font-family: 'Montserrat', helvetica, arial, sans-serif !important;
    font-size: 1rem !important;
}

.twitter-feed {
    display: none;
}

.fine-print {
    font-size: .8em !important;
    padding: 0px;
    margin: 0px;
}

/* SCHOOL BANNERS */

.school-homepage-banner {
    background-color: #00417F;
    color: white;
    width: 100vw;
    margin: auto;
    height: auto;
    padding: 10px;
    /* border: 1px solid red; */
}

.school-homepage-banner.abbey {
    background-color: rgb(0, 12, 78);
    background-image: linear-gradient(45deg, rgb(0, 0, 0), #DC0017, green);
}

.school-homepage-banner.division {
    background-color: rgb(0, 12, 78);
    background-image: linear-gradient(45deg, rgb(0, 0, 0), #0E4CA0, rgb(109, 171, 230));
}

.school-homepage-banner.eastbroadway {
    background-color: rgb(0, 12, 78);
    background-image: linear-gradient(45deg, rgb(0, 0, 0), #030168, rgb(0, 60, 255));
}

.school-homepage-banner.gardiners {
    background-color: rgb(0, 12, 78);
    background-image: linear-gradient(45deg, rgb(0, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0));
}

.school-homepage-banner.lee {
    background-color: rgb(0, 12, 78);
    background-image: linear-gradient(45deg, rgb(0, 0, 0), rgb(20, 106, 50), rgb(255, 238, 0));
}

.school-homepage-banner.macarthur {
    background-color: rgb(0, 12, 78);
    background-image: linear-gradient(45deg, rgb(0, 0, 0), rgb(0, 0, 85), red);
}

.school-homepage-banner.northside {
    background-color: rgb(0, 12, 78);
    background-image: linear-gradient(45deg, rgb(0, 0, 0), rgb(20, 33, 106), rgb(255, 238, 0));
}

.school-homepage-banner.salk {
    background-color: rgb(0, 12, 78);
    background-image: linear-gradient(45deg, rgb(0, 0, 0), #b70000, rgb(255, 0, 0));
}

.school-homepage-banner.summit {
    background-color: rgb(0, 12, 78);
    background-image: linear-gradient(45deg, rgb(0, 0, 0), #415487, #66ABCC);
}

.school-homepage-banner.wisdom {
    background-color: rgb(0, 12, 78);
    background-image: linear-gradient(45deg, rgb(0, 0, 0), rgb(48, 107, 156), rgb(48, 107, 156));
}


.school-homepage-banner a,
.school-homepage-banner a:hover {
    color: #ffffff;
    text-decoration: none;
    width: 100%;
}

.school-homepage-banner-content {
    width: 100%;
    max-width: 1600px;
    margin: auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    text-shadow: 1px 1px 1px #000000;
}

.school-homepage-banner-school-logo {
    height: auto;
    margin-right: 10px;
}

.school-homepage-banner-school-logo img {
    height: auto;
    width: 90px;
    filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 0.4));
}

.school-homepage-banner-school-name {
    font-size: 1.3em;
    font-weight: 500;
    line-height: 1.2em;
}

.school-homepage-banner-school-address {
    font-size: .6em;
    line-height: 1em;
    font-style: italic;
    color: rgb(245, 245, 245);
}

.school-homepage-banner-school-address .delimiter {
    display: none;
}

.school-merrit-badges-social-media-placeholder-desktop {
    display: none;
}

.school-merrit-badges-social-media-placeholder-mobile {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
    background-color: rgb(51, 51, 51);
    border-bottom: 2px solid black;
}

.school-merrit-badges-social-media-placeholder-mobile img {
    height: 60px;
    margin: 8px;
}

.salk-character-logos-placeholder {
    margin-top: 15px;
    border: 0px solid red;
}

.salk-character-logos {
    height: 50px;
}

.school-banner-left {
    flex-grow: 1;
}

#sub-navigation {
    background-color: #333333;
    width: 100vw;
    margin: auto auto;
}

#sub-navigation>ul {
    padding: 0px;
    margin: 0px;
    width: 100%;
    max-width: 1600px;
}

#sub-navigation>ul>li {
    display: block;
    min-height: 50px;
    text-align: center;
    padding: 0px;
    margin: 0px;
    border-bottom: 2px solid #000000;
    color: white;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: pointer;
    padding: 10px 0px 10px 0px;
}

#sub-navigation.district-subnav>ul>li>ul {
    -top: 60px;
}

#sub-navigation>ul>li>ul {
    display: none;
    z-index: +1;
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
    margin-top: 15px;
    border-bottom: 10px solid #000000;
}

#sub-navigation>ul>li>ul>li {
    margin: 0;
    min-height: 55px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    font-size: 1.2rem;
    font-weight: normal;
    border-top: 1px solid #565656;
    background-color: #333333;
}

#sub-navigation>ul>li>ul>li:hover {
    background-color: #4b4b4b;
}


#sub-navigation>ul>li>ul>li>a {
    color: #b0b0b0;
    padding: 10px;
    display: block;
    font-weight: normal;
}

#sub-navigation>ul>li>ul>li>a:hover {
    color: #ffffff;
}

/* school homepage middle areas */

.school-homepage-middle-area-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    max-width: 1600px;
    margin: auto;
    margin-bottom: 10px;
    padding: 0px;
    border: 0px solid red;
}

.school-homepage-calendarwiz {
    width: 100%;
}


.school-homepage-middle-area-right {
    width: 100vw;
}

.school-homepage-middle-area-right div {
    width: 100%;
    margin-bottom: 5px;

}

.school-homepage-middle-area-right div img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

.flexpage-placeholder {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.page-body-middle-column {
    flex-grow: 1;
}

.page-content {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 0px 5px 0px 5px;
    text-align: center;
    border: 0px solid red;
}

.page-content h3 {
    width: 100%;
    display: block;
    margin-top: 20px;
    margin-bottom: 00px;
    border: 0px solid red;
}

.page-content a {
    -padding: 1px;
}

.page-tools {
    display: none;
}

.page-subject,
.page-published-date,
.page-updated-date,
.page-author {
    width: 100%;
    margin-bottom: 0rem;
    text-align: center;
}

.page-updated-date {
    font-style: italic;
}

.school-homepage-news-items {
    margin: auto;
}

.school-homepage-news-item-title {
    text-align: center;
    background-color: rgb(0, 92, 153);
    padding: 10px;
}

.school-homepage-news-item-title a,
.school-homepage-news-item-title a:visited {
    display: block;
    color: white;
}



.school-homepage-news-item img {
    width: 100vw;
}

.school-homepage-news-item-description {
    padding: 10px;
    text-align: center;
}

.school-homepage-news-items-more-school-news {
    width: 100%;
}

.school-homepage-news-items-more-school-news a,
.school-homepage-news-items-more-school-news a:visited {
    display: block;
    padding: 10px;
    text-align: center;
    font-size: 1.2rem;
}

.school-homepage-photo-gallery-title {
    text-align: center;
    width: 100%;
    background-color: #0071b8;
    text-align: center;
}

.school-homepage-photo-gallery-title a h3,
.school-homepage-photo-gallery-title a:visited h3 {
    display: block;
    margin: auto;
    color: white;
    padding: 10px;
    background-color: #0071b8;
}

.school-homepage-photo-gallery div a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 5px;

}

.school-homepage-photo-gallery div a img {
    width: 49%;
    height: auto;
}

.school-homepage-calendar {
    display: block;
    width: 100%;
    height: auto;
    margin: auto;
    text-align: center;
    padding: 20px;
    background-color: #EEE8CE;
}

.redBox {
    background-color: #ffebeb;
    padding: 10px;
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 10px;
}

.blueBox {
    background-color: #ebf5ff;
    padding: 10px;
    width: 99%;
    margin-bottom: 1rem;
    border-radius: 10px;
}

.yellowBox {
    background-color: #ffffe7;
    padding: 10px;
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 10px;
}

.yellowBox2 {
    background-color: #FEF9E6;
    padding: 10px;
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 10px;
}

.purpleBox {

    background-color: #F4EDF8;
    padding: 10px;
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 10px;
}

.greenBox {
    background-color: #e9ffea;
    padding: 10px;
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 10px;
}

.next-boe-meeting-box {
    background-color: #EBF5FF !important;
}

.flexbox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

}

.flexbox div {
    width: 100%;
    flex-basis: auto;
    border: 0px solid red;
    margin: 10px;
    flex-grow: 1;
}

.flexbox .buttonItem {
    text-align: center;
    border: 1px solid gray;
    border-radius: 10px;
    background-color: #0071B8;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.flexbox .buttonItem a {
    display: block;
    color: white;
    padding: 20px;
    border: 0px solid red;
}

.flexbox.button-grid {
    gap: 15px;
    justify-content: center;
}

.flexbox.button-grid a {
    width: 100%;
    min-height: 100px;
    color: white;
    text-align: center;
    border-radius: 10px;
    background-color: #004280;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 22px;
}

.flexbox.button-grid a.red {
    background-color: #ff0000;
}

.flexbox.button-grid a:hover {
    background-color: green;
}

.box-with-shadow {
    box-shadow: 0px 0px 12px rgb(202, 202, 202);
    padding: 14px;
    border-radius: 10px;
}

.menu-toggle-placeholder {
    height: 0px;
    overflow: hidden;
    margin-top: 5px;
    margin-bottom: 10px;
}

.districtNewsItems {
    width: 95vw;
    max-width: 1600px;
    margin: auto;
}

.districtNewsItem {
    display: table;
    margin-bottom: 10px;
    text-align: center;
    -box-shadow: 0px 0px 12px rgb(202, 202, 202);
}

.districtNewsItem img {
    width: 100%;
    margin-bottom: 10px;
    border-radius: 10px;
}

.districtNewsItem div {
    display: none;
}

.yearly-boe-minutes {
    margin-bottom: 10px;
}

.page-content img {
    margin: auto;
    width: 95vw;
    text-align: center;
}

.page-banner {
    width: 100%;
}

.page-content .infobox {
    order: 1;
    width: 100%;
    padding: 15px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 12px rgb(202, 202, 202);
    background-color: #FDFDFD;
}

.page-content .infobox h4 {
    margin-bottom: 1rem;
}

.page-content .infobox ul {
    list-style-type: none;
    margin-top: 0px;
}



.page-content .infobox img {
    display: none;
}


.news-article .image-placeholder,
.news-article .image-placeholder-right,
.news-article .image-placeholder-left {
    width: 95vw;
    height: auto;
    margin: auto;
    margin-bottom: 10px;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background-color: rgb(235, 235, 235);

}

.news-article .image-placeholder img,
.news-article .image-placeholder-right img,
.news-article .image-placeholder-left img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    margin-left: 0px;
    margin-right: 0px;
}


.image-caption {
    display: block;
    width: 100%;
    margin: 0px;
    margin-bottom: 10px;
    padding: 5px;
    font-style: italic;
    text-align: center;

}

.article-gallery-infobox {
    display: block;
    width: 100%;
    text-align: center;
    padding: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.199);
}

.article-gallery-infobox .main-photo {
    width: 100%;
}

.article-gallery-infobox .thumbnails {
    display: flex;
    justify-content: space-between;
}

.article-gallery-infobox .thumbnails img {
    width: 24.2%;
}

.article-gallery-infobox .description {
    margin-top: 20px;
}

.faculty-admin-container,
.faculty-staff-container {
    width: 100%;
    padding-top: 10px;
}

.staff-box {
    break-inside: avoid;
    margin-bottom: 40px;
}

.staff-box h4 {
    margin-bottom: 0px;
}

.facultyBox {
    min-height: 25px;
}

.library-databases {
    width: 100%;
}

.library-databases div {
    border-top: 0px solid #0071b8;

    text-align: center;
}


.library-databases .image-placeholder {
    display: block;
    width: 100%;
    text-align: center;
}

.library-databases .image-placeholder img {
    width: 100%;
}

/* TABLES */

.data-table {
    width: 95vw;
    border-collapse: collapse;
    margin: auto;
    margin-bottom: 10px;
}

.data-table tr {
    border-bottom: 1px solid #bcbcbc;
}

.data-table.highlight-odd-rows tr:nth-child(odd) {
    background-color: #f5f5f5;
}

.data-table th {
    padding: 5px;
    color: black;
    font-weight: bold;
    text-align: left;
    background-color: #cfcfcf;
}

.data-table td {
    text-align: left;
    padding: 5px;
    vertical-align: top;
}

.data-table p {
    margin: 0;
    padding: 0;
    line-height: 1.6em;
}

.data-table.guidance-caseloads {
    font-size: 1rem;
}

.school-schedules {
    text-align: center;
    margin: auto;
    width: 95vw;
    max-width: 1400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 20px;
}

.school-schedules div {
    width: 100%;
    -border: 1px solid red;
}

.school-schedule {
    min-width: 100%;
    -border: 1px solid red;
}

.data-table.school-schedule .period {
    text-align: center;
    width: 40px;
    margin: 0px;
    padding: 5px;
    font-weight: bold;
    vertical-align: middle;
    background-color: #929292;
}

.data-table.school-schedule .reg-hours {
    text-align: left;
    margin: 0px;
    padding: 5px;
    vertical-align: middle;
    border-right: 1px solid #CFCFCF;
}

.data-table.school-schedule .delayed-hours {
    text-align: left;
    margin: 0px;
    padding: 5px;
    vertical-align: middle;
    border-right: 1px solid #CFCFCF;
}

.data-table.school-schedule .period,
.data-table.school-schedule .reg-hours,
.data-table.school-schedule .delayed-hours {
    font-size: 14px;
    line-height: 14px;
}

.hof-inductees {
    margin-top: 0px;
}

.hof-inductee {
    width: 100%;
    min-height: 300px;
    padding: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #0072b834;
}

.page-content .hof-inductee img {
    width: 200px;
    margin: auto;
    border-radius: 100px;
}


/* GALLERIES */

/* this is displayed on on the gallery listing page */

.galleries {
    width: 100%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

.gallery {
    width: 100%;
}

.gallery h4 {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 0px;
    font-weight: bold;
    color: white;
    background-color: #0A71B5
}

/* this is displayed on the actual individual gallery page */

.gallery-thumbs {
    width: 100%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    border: 0px solid red;
}

.gallery-thumb {
    width: 30%;
    margin: 5px;
    max-width: 165px;
    cursor: zoom-in;
}

.choose-different-gallery {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

.forms-category {
    width: 100%;
    border-bottom: 1px solid #0071b8;
}

.forms-subcategory {
    width: 100%;
    margin-top: .9rem;
    border: 0px solid green;
}


.fancybox__content {
    padding: 1px;
    -width: 90vw !important;
    -height: 80vh !important;
}

.hide-on-mobile {
    display: none;
}

.show-on-full-site-only {
    display: none;
}

.successfulMessage {
    width: 100%;
    padding: 10px;
    background-color: rgb(214, 255, 214);
    margin-bottom: 20px;
    border: 1px solid green;
}

.errorMessage {
    width: 100%;
    padding: 10px;
    background-color: rgb(255, 214, 214);
    margin-bottom: 20px;
    border: 1px solid rgb(128, 0, 0);
}

.new {
    color: green;
    font-weight: bold;
}

.virtual-backpack-day {
    border-bottom: 1px solid #0072b834;
    break-inside: avoid;
    margin-bottom: 5px;
    padding: 10px;
}

/* PAYPAL ITEMS */

.paypal-items-header {
    text-align: center;
    margin: 0px;
    padding: 20px;
}

.paypalItems {
    width: 90vw;
    border: 0px solid red;
}

.paypalItem {
    width: 100%;
    -height: 220px;
    background-color: #fffbb8;
    text-align: center;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 10px;
}

.paypalItem p {
    font-weight: bold;
}

.paypalItem form {
    display: block;
    width: 100%;
    border: 0px solid red;
}

.paypalItem form table {
    width: 100%;
    border: 0px solid red;
}


.paypalItem form table td {
    width: 100%;
    text-align: center;
    border: 0px solid red;
}


.paypalItem form table td input,
.paypalItem form table td select {
    display: block;
    margin: auto;
    width: 100%;
}

.embedded-youtube-video {
    width: 350px;
    min-height: 197px;
    margin-bottom: 10px;
    border: 5px solid black;
}

.expired-item {
    background-color: rgb(255, 226, 198);
}

.expired-item a {
    color: red;
}

.scheduled-item {
    background-color: rgb(205, 255, 198);
}

.scheduled-item a {
    color: green;
}

.two-columns {
    margin-bottom: 1em;
}

.two-columns>div {
    margin-bottom: 1em;
}

.department-contact a {
    padding: 0px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.important-red {
    color: rgb(197, 0, 0) !important;
    font-weight: bold !important;
}

.invalidData {
    background-color: #ffcdcd !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

.guidance-block div {
    display: none;
}

.guidance-heading {
    background-color: #005b94;
    color: white;
    padding: 10px;
    cursor: pointer;
    border-radius: 10px;
    font-weight: bold;
    font-size: 1.2em;
    z-index: 110;
}

.plus-minus-icon {
    width: 25px;
    height: 25px;
    float: right;
}

.question-answer-block {
    margin-bottom: 15px;
}

.question-answer-block .question {
    cursor: pointer;
    line-height: 1.6em;
}

.question-answer-block .answer {
    display: none;
    padding: 15px;
    background-color: rgb(235, 235, 235);
    border-radius: 10px;

}

.collapsed-block div {
    display: none;
    margin-top: 10px;
    padding: 10px;
    background-color: rgb(235, 235, 235);
    border-radius: 10px;
}

.collapsed-block-link {
    cursor: pointer;
}

.force-break-on-mobile {
    display: block;
}

.flyer-thumbnail {
    border: 1px solid gray;
}

.school-fly-over {
    display: none;
}

.grecaptcha-badge {
    z-index: 1000;
}

.ppnl-section-box:nth-child(odd) {
    background-color: #ebf5ff;
    padding: 10px;
    width: 100%;
    margin: 0px;
    margin-bottom: 1rem;
    border-radius: 10px;
}

.ppnl-section-box:nth-child(even) {
    background-color: #e9ffea;
    padding: 10px;
    width: 100%;
    margin: 0px;
    margin-bottom: 1rem;
    border-radius: 10px;
}

.logo-grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    margin: auto;
}

.logo-grid div {
    width: 100%;
    text-align: center;
    background-color: #ececec;
    border-radius: 10px;
}

.meeting-years {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0px;
    background-color: #ebf5ff;
    border-radius: 10px;

}

.meeting-years div {
    width: 115px;
    padding: 10px;

}

.agenda-search {
    margin: 10px 0px 10px 0px;
}

.css-table>div>div {
    padding-bottom: 1em;
}

.ppn-calendar-month {
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.ppn-calendar-day {
    width: 100%;
    display: flex;
    flex-wrap: no-wrap;
    justify-content: flex-start;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0px solid red;
}

.ppn-calendar-day-date {
    min-width: 40px;
    font-size: 1.4em;
    border: 0px solid red;
}

.ppn-calendar-day-description {
    flex-grow: 2;
    border: 0px solid red;
}

.submit-a-tip-link {
    background-color: #FCB525;
    color: black;
    border-radius: 10px;
    padding-top: 3px;
}


/* BREAKPOINTS */

@media only screen and (min-width: 640px) {

    .page-content {
        max-width: 1600px;
        margin: auto;
        text-align: left;
    }

    .page-content ul {
        list-style-type: disc;
        margin-top: 0px;
    }

    .page-content li {
        margin-left: 25px;
    }

    .page-content li a {
        padding: 3px;
    }


    .school-homepage-banner-school-name {
        font-size: 5vw;
        line-height: 1.3em;
    }

    .school-homepage-banner-school-address {
        font-size: .5em;
        line-height: 1em;
        font-style: italic;
    }

    .image-caption {
        display: inline-block;
        margin-bottom: 0px;
        background-color: transparent;
    }

    .page-content .infobox ul {
        list-style-type: disc;
        margin-left: 15px;
        margin-top: 1rem;
    }

    .page-content .infobox li {
        margin-left: 0px;
    }

    .page-content .infobox img {
        min-width: unset;
        max-width: 190px;
        display: inline;
        float: unset;
        margin: auto;
        text-align: center;
    }

    .hof-inductees {
        columns: 2;
    }

    .hof-inductee {
        break-inside: avoid;
        border: 1px solid #0072b834;
        border-radius: 10px;
        overflow: auto;
        display: flow-root;
    }

    .page-content .hof-inductee img {
        margin-left: 10px;
        margin-bottom: 10px;
    }

    .article-gallery-infobox {
        float: right;
        max-width: 380px;
        text-align: center;
        margin-left: 20px;
        margin-bottom: 20px;
        box-sizing: border-box;
        padding: 10px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.199);
    }

    .article-gallery-infobox .main-photo {
        width: 100%;
    }

    .article-gallery-infobox .thumbnails {
        display: flex;
        justify-content: space-between;
    }

    .article-gallery-infobox .thumbnails img {
        width: 24%;
    }

    .article-gallery-infobox .description {
        margin-top: 20px;
    }

    .faculty-admin-container,
    .faculty-staff-container {
        columns: 2;
        column-gap: 15px;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .faculty-staff-container {
        border-top: 1px solid #0071b8;
    }

    .business-department-commercials {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .business-department-commercials a {
        text-align: center;
    }

    .business-department-commercials img {
        width: 300px;
        border-radius: 10px;
    }

    .data-table.guidance-caseloads {
        font-size: .9em;
    }

    .two-columns {
        columns: 2 auto;
        column-gap: 50px;
    }

    .two-columns ul>li,
    .two-columns p,
    .two-columns>div {
        break-inside: avoid;
    }

    .three-columns {
        columns: 2 auto;
        column-gap: 50px;
    }

    .three-columns>div {
        break-inside: avoid;
    }

    .multi-columns {
        columns: 3 auto;
    }

    .multi-columns ul>li,
    .multi-columns p,
    .multi-columns div {
        break-inside: avoid;
    }

    .flexbox div {
        width: 45%;
    }

    /* PAYPAL ITEMS */

    .paypalItems {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .paypalItem {
        width: 48.2%;
        margin: 0px 5px 5px 5px;
    }

    .embedded-youtube-video {
        width: 100%;
        max-width: 360px;
        max-height: 203px;
    }

    .virtual-backpack-day {
        border: 1px solid rgb(238, 238, 207);
        margin-bottom: 15px;
        background-color: rgb(255, 255, 219);
        border-radius: 10px;
    }

    .question-answer-block .question {
        display: list-item;
        list-style-type: disc;
        margin-left: 20px;
    }

    .logo-grid div {
        width: 49%;
    }

    .meeting-years {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0px;

    }

    .meeting-years div {
        width: 115px;
        padding: 10px;

    }



}



@media only screen and (min-width: 800px) {

    /* h3 page titles*/
    h3 {
        text-align: left;
    }

    input[type=text],
    select,
    textarea {
        width: unset;
    }

    form {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
    }

    form>div {
        width: unset;
        margin: 5px;
        border: 0px solid black;
    }

    form .first-name {
        width: 25ch;

    }

    form .last-name {
        width: 25ch;
    }

    form .email-address {
        width: 40ch;
    }

    form .phone-number {
        width: 15ch;
    }

    form .message-subject {
        width: 75ch;
    }

    form .message-body {
        width: 75ch;
    }

    .submit-button-placeholder {
        width: 100%;
    }


    input[type="button"],
    input[type="submit"],
    .g-recaptcha {
        margin: unset;
    }

    /* HEADER BLACK BAR */

    #header #black-bar {
        background-color: black;
        display: block;
    }

    #header #black-bar #black-bar-content {
        max-width: 1600px;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        color: #E4E4E4;
        padding: 5px;
        border: 0px solid red;
    }

    #header #black-bar #black-bar-content #google-translate {
        margin-right: 10px;

    }

    #header #black-bar #black-bar-content #header-search {
        width: 60px;
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border: 0px solid red;
        z-index: 100;
    }

    #header #black-bar #black-bar-content #header-search div {
        position: absolute;
        z-index: 99;
        top: 60px;
        left: 0px;
        width: 100%;
        height: 70px;
        background-color: white;
        border-bottom: 1px solid gray;
        text-align: center;
        box-shadow: 0px 22px 20px rgba(0, 0, 0, 0.3);
        display: none;
    }

    #header #black-bar #black-bar-content #header-search form {
        margin: auto;
        margin-top: 10px;
        width: 90%;
        max-width: 1400px;
        display: flex;
        justify-content: space-between;
    }

    #header #black-bar #black-bar-content #header-search form label {
        display: none;
    }

    #header #black-bar #black-bar-content #header-social-media-icons {
        display: none;
    }

    #header #black-bar #black-bar-content #header-search form input[type=text] {
        height: 45px;
        padding: 2px;
        flex-grow: 1;
    }

    #header #black-bar #black-bar-content #header-tagline {
        width: 150px;
        font-style: italic;
        display: flex;
        justify-content: left;
        align-items: center;
        flex-grow: 1;
        border: 0px solid red;
    }

    #header #black-bar #black-bar-content #header-date {
        font-style: italic;
        text-align: right;
        margin-right: 5px;
        border: 0px solid red;
    }


    /* BLUE BAR */

    #header #blue-bar {
        height: 250px;
        background-image: linear-gradient(#0071B6, #00417F);

    }

    #header #blue-bar #blue-bar-content {
        flex-wrap: wrap;
    }

    #header #blue-bar #blue-bar-content #mobile-search {
        display: none;
    }

    #header #blue-bar #blue-bar-content #hamburger-placeholder {
        display: none;
    }

    #header #blue-bar #blue-bar-content #header-lps-logo {
        display: block;
        margin-right: 5px;
    }

    #header #blue-bar #blue-bar-content #header-lps-logo img {
        height: 70px;
        filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.3));
    }

    #header #blue-bar #blue-bar-content #levittown-public-schools img {
        width: 376px;
    }

    /* MAIN NAV */

    #header #blue-bar #blue-bar-content #main-nav {
        display: block !important;
        position: relative;
        width: 100%;
        top: 0px;
        margin: auto auto;
        margin-left: 0px;
        margin-right: 0px;
        background-color: transparent;
        border: 0px solid red;
    }

    #header #blue-bar #blue-bar-content #main-nav>ul {
        position: relative;
        /* width: 100%; */
        display: flex;
        justify-content: center;
    }

    #header #blue-bar #blue-bar-content #main-nav>ul>li:nth-of-type(1),
    #header #blue-bar #blue-bar-content #main-nav>ul>li:nth-of-type(8),
    #header #blue-bar #blue-bar-content #main-nav>ul>li:nth-of-type(9) {
        display: none;
    }

    #header #blue-bar #blue-bar-content #main-nav>ul>li {
        position: relative;
        width: 17%;
        text-align: center;
        border: none;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        font-size: 21px;
    }

    #header #blue-bar #blue-bar-content #main-nav>ul>li:hover {
        background-color: #002f5c;
    }

    #header #blue-bar #blue-bar-content #main-nav>ul>li img {
        display: inline;
        width: 8px;
    }

    #header #blue-bar #blue-bar-content #main-nav>ul>li>ul {
        position: absolute;
        height: unset;
        overflow: hidden;
        width: 100%;
        margin-left: 0px;
        left: 0px;
        top: 50px;
        background-color: #002f5c;
        box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.5);
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border: 0px solid red;
    }

    #header #blue-bar #blue-bar-content #main-nav>ul>li>ul>li {
        width: auto;
        text-align: center;
    }

    #header #blue-bar #blue-bar-content #main-nav>ul>li>ul>li:hover {
        background-color: #003c74;
    }


    #header #blue-bar #blue-bar-content #main-nav>ul>li>ul>li>a {
        all: unset;
        font-size: 1.1rem;
        width: 100%;
        display: block;
    }

    #header #blue-bar #blue-bar-content #main-nav>ul>li>ul>li>a:hover {
        text-decoration: underline;
    }

    /* END MAIN NAV */

    #header #blue-bar #blue-bar-content #school-nav {
        display: block;
        margin: auto auto;
        margin-top: 15px;
        margin-bottom: 10px;
        border-bottom: 0px solid rgb(179, 179, 179);
    }

    /* SCHOOL ICON NAV */

    #header #blue-bar #blue-bar-content #school-nav ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border: 0px solid black;
    }

    #header #blue-bar #blue-bar-content #school-nav ul li {
        text-align: center;
        width: 80px;
        height: 70px;
        margin: 0px;
        border: 1px solid red;
    }

    #header #blue-bar #blue-bar-content #school-nav ul li a {
        font-size: 0em;
    }

    #header #blue-bar #blue-bar-content #school-nav {
        -display: none;
    }

    #header #blue-bar #blue-bar-content #school-nav img {
        height: 60px;
        filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.8));
    }

    #header #blue-bar #blue-bar-content #school-nav {
        margin: auto auto;
        margin-top: 15px;
        margin-bottom: 10px;
    }

    #header #blue-bar #blue-bar-content #school-nav ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        border: 0px solid red;
    }

    #header #blue-bar #blue-bar-content #school-nav ul li {
        text-align: center;
        width: 70px;
        height: 70px;
        margin: 0px;
        border: 0px solid red;
    }

    #header #blue-bar #blue-bar-content #school-nav ul li a {
        font-size: 0em;
    }

    .school-homepage-banner-school-logo {
        margin-right: 10px;
        width: 170px;

    }

    .school-homepage-banner-school-logo img {
        height: 130px;
        width: auto;
    }



    /* for 800 width and beyond */

    #sub-navigation>ul {
        margin: auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        padding-left: 140px;
        min-height: 75px;
        list-style-type: disc;
        list-style-image: url('/images/sub-nav-bookmark.svg');
    }

    #sub-navigation.district-subnav>ul {
        padding-left: 0px;
    }

    #sub-navigation>ul>li {
        font-size: 1.3rem;
        padding: 10px;
        width: 100%;
        border-bottom: none;
        position: relative;
        margin-top: 15px;
        /* border: 1px solid red;      */
    }

    #sub-navigation>ul>li>ul {
        display: none;
        z-index: +1;
        position: absolute;
        list-style-type: none;
        padding: 0;
        margin: 0;
        margin-left: -10px;
        margin-top: 9px;
        border-bottom: none;
    }

    #sub-navigation>ul>li>ul>li:last-child {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    /* HEADER DATE BAR  */
    #header #date-bar {
        display: none;
    }

    #footer #footer-content {
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #footer #footer-content .footer-district-name {
        text-align: left;
    }

    #footer #footer-content .footer-disclaimer {
        margin: auto;
        max-width: 595px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    #footer #footer-content .footer-delimiter {
        display: block;
    }

    .homepage-banner-image-mobile {
        display: none;
    }

    .homepage-banner-image-desktop {
        display: block;
        width: 100%;
    }

    .homepage-banner-article.mobile {
        display: none;
    }

    .homepage-banner-article.desktop {
        display: block;
        width: 100%;
        height: 60vw;
        max-height: 420px;
    }

    /* HOMEPAGE IMPORTANT MESSAGES */

    .homepage-important-message img {
        display: block;
        height: 100px;
        float: right;
    }

    /* HOMEPAGE BOE MEETING MESSAGES */

    .homepage-boe-meeting-message {
        padding: 15px;
        text-align: left;
    }

    .homepage-boe-meeting-message img {
        display: block;
        height: 200px;
        float: right;
        margin-left: 10px;
        border-radius: 10px;
    }

    .homepage-top-messages .homepage-top-message,
    .homepage-top-messages .homepage-top-message h3,
    .homepage-important-message h3 {
        text-align: center;
    }



    .homepage-resources li a {
        font-size: 18px;
        line-height: 1.2em;
    }

    .homepage-resources li a .resource-caption {
        font-size: .8rem;
    }

    /* .homepage-middle-area-container {
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between;    
    }

    .homepage-middle-area-right {
        display: block;
    }

    .homepage-middle-area-container .homepage-middle-area-left,
    .homepage-middle-area-container .homepage-middle-area-right {
        width: 49%;
    }    

    .homepage-middle-area-right .success-at-lps-video img  {
        width:100%;
        border: 15px solid #E4E4E4;
        border-radius: 10px;
    }     */

    .ps-pp-wdic {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        border: 0px solid red;
    }

    .ps-pp-wdic a {
        width: 48%;
        flex-grow: 1;
        text-align: center;
        border: 0px solid red;
    }

    .ps-pp-wdic a img {
        height: 140px;
        width: auto;
        border: 0px solid red;
    }







    .homepage-school-news-ribbon-content {
        padding-bottom: 20px;
    }

    .homepage-school-news-ribbon-item {
        display: block;
        width: 42%;
        padding: 10px;
        border: 0px solid red;
        margin: 10px;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.349);
        border-radius: 5px;
    }

    .homepage-school-news-ribbon-item img {
        border-radius: 5px;
    }

    /* INTERIOR PAGE CONTENT */

    .school-homepage-calendarwiz {
        order: 0;
        width: 50%;
    }

    .school-homepage-middle-area-right {
        width: 50%;
    }

    .page-content {
        text-align: left;
        display: block;
    }

    .page-content img {
        width: 48vw;
        max-width: 500px;
        float: right;
        margin-left: 10px;
    }

    .news-article .image-placeholder,
    .news-article .image-placeholder-left,
    .news-article .image-placeholder-right {
        margin: 3px;
        width: 48vw;
    }

    .news-article .image-placeholder-left {
        float: left;
    }

    .news-article .image-placeholder-right {
        float: right;
    }

    .news-article .image-placeholder img,
    .news-article .image-placeholder-left img,
    .news-article .image-placeholder-right img {
        width: 100%;
        max-width: unset;
    }

    .page-tools {
        display: flex;
        justify-content: space-between;
        width: 80px;
        min-height: 40px;
        float: right;
        border: 0px solid red;
    }

    .page-tools img {
        height: 30px;
        width: auto;
        margin: 0;
    }

    .page-subject,
    .page-published-date,
    .page-updated-date,
    .page-author {
        text-align: left;
    }

    .page-content .infobox {
        width: 220px;
        float: right;
        margin: 0;
        margin-left: 10px;
        margin-bottom: 40px;
    }

    .page-content .infobox .image-placeholder {
        display: block;
        width: min-content;
        max-width: 200px;
        margin: auto;
    }

    .flexbox div {
        width: 31%;
    }

    .flexbox.button-grid a {
        width: 48%;
    }

    .flexbox.with-infobox {
        width: 70%;
    }

    .flexpage-placeholder {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: stretch;
        align-content: flex-start;
    }

    .contacts-container {
        column-count: 3;
        column-gap: 10px;
    }

    .contacts-container>div {
        break-inside: avoid;
    }

    .faculty-admin-container,
    .faculty-staff-container {
        columns: 4;
    }

    .faculty-admin-container .staff-box {
        break-after: column;
    }

    .hide-on-mobile {
        display: block;
    }

    .submit-button-placeholder {
        width: 100%;
    }

    .cwulistwrapper {
        height: 100%;
        overflow: hidden;
    }

    .cwulistwrapper h2 {
        text-align: left;
    }

    .cwuceeventtitle {
        display: block;
    }

    .cwuceeventtitle div {
        text-align: left !important;
        font-size: 10pt !important;
    }

    .uce_event_title {
        display: unset;
        margin-bottom: 15px;
        font-size: 12pt !important;
        text-align: left !important;
    }

    .school-homepage-banner-school-name {
        font-size: 2em;
        width: auto;
    }

    .school-homepage-banner-school-address {
        font-size: .4.5em;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .school-homepage-banner-school-address .delimiter {
        display: block;
        text-align: right;
    }

    .school-homepage-banner-school-address>div {
        margin-right: .5em;
    }

    .school-merrit-badges-social-media-placeholder-mobile {
        display: none;
    }

    .school-merrit-badges-social-media-placeholder-desktop {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: auto;
        gap: 10px;
    }

    .school-merrit-badges-social-media-placeholder-desktop img {
        height: 50px;
        margin-left: 10px;
    }

    .page-subject,
    .page-published-date,
    .page-updated-date,
    .page-author {
        text-align: left;
    }

    .library-databases {
        width: unset;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: flex-start;
    }

    .library-databases div {
        width: 100%;
        display: flex;
        justify-content: center;
        text-align: center;
        border: 0px solid red;
    }

    .library-databases img {

        margin: 0px;
        margin-bottom: 10px;
        width: 100%;
        max-width: 500px;
        display: block;
    }

    .data-table {
        width: 100%;
        margin: auto;
    }

    .data-table.guidance-caseloads {
        margin-left: 0;
        margin-bottom: 10px;
    }

    .polling-site-locator {
        min-width: 400px;
        margin-top: 10px;
    }

    .polling-site-locator .house-number {
        min-width: 130px;
    }

    .three-columns {
        columns: 3 auto;
    }

    .three-columns ul {
        margin: 0;
    }

    .school-schedules div {
        width: 33%;
    }

    .data-table.school-schedule .period,
    .data-table.school-schedule .reg-hours,
    .data-table.school-schedule .delayed-hours {
        font-size: 16px;
        line-height: 20px;
    }

    .force-break-on-mobile {
        display: unset;
    }

    .districtNewsItems {
        -width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        gap: 25px;
    }

    .districtNewsItem {
        width: 48%;
        min-height: 345px;
        text-align: left;
        box-shadow: none;
        min-height: unset;
        padding: 0px;
    }

    .districtNewsItem img {
        width: 100%;
        margin: 0;
        margin-bottom: 10px;
    }

    .districtNewsItem div {
        display: block;
    }

    .school-fly-over {
        display: block;
    }

    .logo-grid div {
        width: 32.5%;
    }

    .css-table {
        display: table;
    }

    .css-table>div {
        display: table-row;
    }

    .css-table>div>div {
        display: table-cell;
        padding: 10px;
        border: 1px solid rgb(226, 226, 226);
    }



}

@media only screen and (min-width: 860px) {

    /* END MAIN NAV  */

    .salk-character-logos {
        height: 60px;
    }

    .data-table.guidance-caseloads {
        margin-left: 0;
    }

}

@media only screen and (min-width: 1026px) {

    .paypalItem {
        width: 32%;
    }

    .flexbox.button-grid a {
        width: 32%;
    }

    .logo-grid div {
        width: 19.3%;
        text-align: center;
        border-top: 0px solid black;
        background-color: #e6e6e6;
        border-radius: 10px;
    }

}

@media only screen and (min-width: 1060px) {

    #header #blue-bar {
        height: 202px;
    }

    #header #blue-bar #blue-bar-content {
        flex-wrap: nowrap;
    }

    /* MAIN NAV */


    #header #blue-bar #blue-bar-content #main-nav {
        margin-top: 50px;
        margin-left: 10px;
        margin-right: 10px;
    }

    #header #blue-bar #blue-bar-content #main-nav>ul {
        width: 100%;
        justify-content: space-between;
        flex-wrap: nowrap;
        border: 0px solid red;
        margin: 0;
        padding: 0;
    }

    #header #blue-bar #blue-bar-content #main-nav>ul>li {
        min-height: 50px;
        align-items: end;
        padding: 5px;
        position: relative;
        font-size: 16px;
        padding: 5px;
        border: 0px solid red;
    }

    #header #blue-bar #blue-bar-content #main-nav>ul>li>ul {
        position: absolute;
        width: 100%;
        left: 0px;
        border: 0px solid red;
    }

    #header #blue-bar #blue-bar-content #main-nav>ul>li>ul>li {
        text-align: center;
    }


    /* END MAIN NAV */

    #header #blue-bar #blue-bar-content #header-quick-links {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 600px;
        border: 0px solid red;
    }

    #header #blue-bar #blue-bar-content #header-quick-links>div>a {
        margin-left: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 1em;
        border: 0px solid red;
    }

    #header #blue-bar #blue-bar-content #header-quick-links>div>a {
        padding: 5px;
    }

    #header #blue-bar #blue-bar-content #header-quick-links>div img {
        height: 25px;
        margin-right: 5px;
    }

    #header #blue-bar #blue-bar-content #header-quick-links .quick-link-student-reg {
        display: none;
    }

    .homepage-resources li {
        width: 24.5%;
    }

    .homepage-resources li a {
        font-size: 20px;
    }

    .homepage-resources li a .resource-caption {
        font-size: .9rem;
    }

    .homepage-middle-area-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .homepage-middle-area-right {
        display: block;
    }

    .homepage-middle-area-container .homepage-middle-area-left,
    .homepage-middle-area-container .homepage-middle-area-right {
        width: 49%;
    }

    .homepage-middle-area-right .success-at-lps-video img {
        width: 100%;
        border: 15px solid #E4E4E4;
        border-radius: 10px;
    }


    .ps-pp-wdic a {
        width: 25%;
        border: 0px solid red;
    }

    .ps-pp-wdic a img {
        height: 8vw;
        max-height: 150px;
        width: auto;
        max-width: 300px;
        border: 0px solid red;
    }


    .homepage-school-news-ribbon-items {
        justify-content: space-around;
    }

    .homepage-school-news-ribbon-item {
        width: 23%;
        text-align: left;
        border: 0px solid red;
    }

    .homepage-school-news-ribbon-item-date {
        display: block;
        margin-bottom: 20px;
        border: 0px solid red;
    }

    .school-homepage-calendarwiz {
        width: 395px;
    }

    .school-homepage-middle-area-right {
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px;
        margin-left: 10px;
    }

    .school-homepage-middle-area-right div {
        width: 49%;
        margin: 0px;
    }

    .page-content .hof-inductee img {
        float: right;
    }

    .multi-columns {
        columns: 3 auto;
    }

    .paypalItem {
        width: 32%;
    }

    #header #black-bar #black-bar-content #header-social-media-icons {
        display: block;
    }

    #header #black-bar #black-bar-content #header-social-media-icons img {
        margin-left: 10px;
    }

    .school-merrit-badges-social-media-placeholder-desktop img {
        width: 70px;
        height: 70px;
    }

}

@media only screen and (min-width: 1200px) {

    .library-databases div {
        width: 30%;
    }

    .data-table.guidance-caseloads {
        width: 710px;
    }

    .districtNewsItem {
        width: 30%;
    }

    .flexbox.with-infobox {
        width: 80%;
    }

}

@media only screen and (min-width: 1209px) {

    #header #blue-bar #blue-bar-content #header-quick-links .quick-link-student-reg {
        display: flex;
    }

    .flexbox div {
        width: 23%;
    }

    #header #blue-bar #blue-bar-content #main-nav>ul>li {
        font-size: 20px;
    }

    .school-homepage-banner {
        max-height: 95px;

    }


}


@media only screen and (min-width: 1262px) {

    .homepage-current-resources-right-hand-ad {
        width: 22%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        border: 0px solid red;
    }

    .homepage-current-resources-right-hand-ad a {
        display: block;
        width: 100%;
    }

    .homepage-current-resources-right-hand-ad img {
        width: 100%;
        max-height: 211px;
        margin-top: 7px;
    }

    .school-homepage-middle-area-right {

        height: fit-content;
    }

    .school-homepage-middle-area-right div {
        width: 32.54%;

    }

    .say-something-wide {
        display: none;
    }


}

@media only screen and (min-width: 1335px) {


    #header #blue-bar #blue-bar-content #school-nav img {
        height: 70px;
    }

    .homepage-middle-area-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .homepage-middle-area-container .homepage-middle-area-left,
    .homepage-middle-area-container .homepage-middle-area-right {
        width: 49%;
    }

    .homepage-middle-area-right .success-at-lps-video img {
        width: 100%;
        border: 15px solid #E4E4E4;
        border-radius: 10px;
    }

    .homepage-middle-area-container .homepage-middle-area-left {
        width: 25%;
    }

    .homepage-middle-area-container .homepage-middle-area-right {
        width: 75%;
    }

    .homepage-middle-area-right {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        border: 0px solid red;
    }

    .homepage-middle-area-right .success-at-lps-video {
        width: 65%;
        padding: 10px;
        text-align: center;
        border: 0px solid red;
    }

    .homepage-middle-area-right .portrait-of-a-graduate {
        padding: 10px;
    }

    .homepage-middle-area-right .portrait-of-a-graduate img {
        width: 100%;
    }

    .homepage-middle-area-right .portrait-of-a-graduate {
        display: block;
        width: 35%;
        text-align: center;
    }

    .homepage-middle-area-right .portrait-of-a-graduate img {
        max-height: 378px;
    }

    .news-article .image-placeholder,
    .news-article .image-placeholder-right,
    .news-article .image-placeholder-left {
        width: 32vw;
        max-width: 520px;
    }

    .show-on-full-site-only {
        display: unset;
    }
}

@media only screen and (min-width: 1600px) {

    #header #blue-bar #blue-bar-content #main-nav>ul>li {
        font-size: 25px;
    }

    .flexbox.with-infobox {
        width: 85%;
    }

}