@charset "utf-8";
body {
    max-height: 100%!important;
    overflow-x: hidden
}

@media (max-width:260px) {
    .quantity-nav {
        height: 75%
    }
}

@media (max-width:340px) {
    a.logo.aboutus {
        font-size: 18px
    }
    div.service-features ul li {
        font-size: .8rem
    }
    .quantity-nav {
        height: 94%
    }
    input#yearbook-page-number {
        height: 60px!important
    }
    div#attending {
        margin-left: 40px
    }
    form#bootstrap-override.reunion-delete-request div.form-group.row label.col-4 {
        font-size: 1rem
    }
    ul.sitemap li.level-two a.school-page {
        width: 90%
    }
    ul.sitemap li.level-two a.class-page {
        width: 90%
    }
    span.directions {
        font-size: .8rem;
        margin-left: -10px
    }
}

@media (max-width:500px) {
    div.sticky-container {
        display: none
    }
    ul.nav-tabs.aboutus li {
        width: 100%
    }
    ul.nav-tabs.helpinformation li.last {
        margin-bottom: -2.5px
    }
    div#helpinformation {
        padding: 5px
    }
    div#helpinformation h4.section-title {
        font-size: 1.2rem
    }
    #contact-options span.custom-control-description,
    div#helpinformation h5.choose-section-title {
        font-size: 1rem
    }
    div#helpinformation button#add-event-button {
        padding: 2px 5px 5px
    }
    div {
        margin-bottom: 0;
        margin-top: 0
    }
    #contact-options .custom-control {
        margin-right: 4px
    }
    fieldset#contactus div.contactus-question:nth-child(2n+1) {
        padding: 4px 0 0 10px
    }
    button#update-event-button {
        width: 90%;
        font-size: .75rem
    }
    ul.nav-tabs.helpinformation li a {
        padding: 2px 4px;
        font-size: .85rem;
        border-bottom: 1.5px solid #423718
    }
    fieldset#contactus h5 {
        font-size: 1.1rem
    }
    fieldset#contactus div.contactus-question {
        margin-bottom: -5px
    }
    ul.nav-tabs.aboutus li a {
        font-size: 1rem;
        background: #8c7f58;
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: 1.5px solid #423718;
        text-align: center;
        padding-top: 5px;
        padding-bottom: 5px
    }
    ul.nav-tabs.aboutus li a.active,
    ul.nav-tabs.helpinformation li a.active {
        border-bottom: 1.5px solid #bdb9b9;
        border-right: 1px solid #bdb9b9;
        border-left: 1px solid #bdb9b9;
        border-top: none;
        -webkit-box-shadow: 0 0 3px #888;
        -moz-box-shadow: 0 0 3px #888;
        box-shadow: 0 0 3px #888
    }
    a.nav-link.active::before {
        border-bottom: none
    }
    a.nav-link.active::after,
    ul.nav-tabs.aboutus li a.active::after,
    ul.nav-tabs.helpinformation li a.active::after {
        border-top: none
    }
    ul.nav-tabs.aboutus li a:not,
    ul.nav-tabs.helpinformation li a:not(.active) {
        border-bottom: 1px solid #423718;
        border-top: 1px solid #423718
    }
    ul.nav-tabs.aboutus li a.first {
        border-top: none
    }
    ul.nav-tabs.aboutus li a.last,
    ul.nav-tabs.helpinformation li a.last {
        border-bottom: none
    }
    .nav-tabs .nav-link {
        border-top-left-radius: 0;
        border-top-right-radius: 0
    }
    div.tab-pane[role=tabpanel] {
        box-shadow: inset 0 5px 10px 1px #000
    }
    div.tab-pane.aboutus p {
        font-size: .9rem;
        text-align: left
    }
    div.aboutus h4 {
        font-size: 1.1rem;
        padding: 6px 5px 0 10px
    }
    .jumbotron .container h1.rreport {
        font-size: 2rem
    }
    .jumbotron .container h2.rreport {
        font-size: 1.6rem
    }
    .jumbotron .container h3.rreport {
        font-size: 1.5rem
    }
    .jumbotron .container h4.rreport {
        font-size: 1.4rem
    }
    div#rreport-event.container.rrepo#sidebarrt-upper-content div.col-4 {
        max-width: 100%;
        text-align: center;
        margin-top: -5px;
        border-bottom: 2px solid #b22222
    }
    div#rreport-event.container.rreport-upper-content div.col {
        text-align: center;
        background: #f5f5f5;
        margin-bottom: -5px;
        font-size: .9rem
    }
    div#event-delete-request-form div#remove-reunion-title h5 {
        font-size: 1rem
    }
    div.rreport.contact-info div.event-delete-reason select#reunionRemovalOption {
        font-size: .7rem;
        padding: 0 22px 0 3px
    }
    ul.sitemap li.level-two a.school-page {
        width: 90%
    }
    ul.sitemap li.level-two a.class-page {
        width: 90%
    }
    ul.sitemap li.level-one a.index-page {
        padding: 0 2px 6px 2px;
        font-size: 1rem;
        margin-bottom: -10px
    }
    ul.sitemap li.level-two a.school-page {
        padding: 0 2px 4px 2px;
        font-size: .94rem;
        margin-bottom: -8px
    }
    ul.sitemap li.level-two a.class-page {
        font-size: .88rem;
        padding: 0 2px 4px 2px
    }
    ul.sub-list {
        margin-left: -96px
    }
    ul.sub-list li {
        font-size: .86rem
    }
    .panel-group div.panel.panel-default h4.panel-title {
        font-size: .84rem;
        padding: 5px 30px 8px 10px
    }
    ul.sitemap {
        font-size: 1rem
    }
    .faq-title {
        font-size: 1rem
    }
    .faq-answer-text {
        font-size: .9rem
    }
    ul.paragraph-list {
        font-size: 1rem!important
    }
    ul.paragraph-list li {
        font-size: 1rem!important
    }
}

@media (max-width:575px) {
    .container {
        width: 94%
    }
    .display-container {
        width: 98%
    }
    .form-control::placeholder {
        font-size: .8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
    .form-control {
        padding: 0 0 0 6px
    }
    .custom-select {
        font-size: .8rem;
        padding: 0 10px 0 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
    div#rreport-event.container.rreport-upper-content div.col-4 {
        display: none;
        visibility: hidden
    }
    div#rreport-event.container.rreport-upper-content div.col-12 {
        display: block;
        visibility: visible
    }
}

@media (max-width:650px) {
    .mobile-hidden-650 {
        display: none
    }
}

@media (min-width:320px) {
    .jumbotron .container h1,
    .jumbotron .display-container h1 {
        font-size: 3.35rem
    }
    .jumbotron .container h2 {
        font-size: 1.8rem
    }
    .jumbotron .container h3 {
        font-size: 1.3rem
    }
    .jumbotron .container h4 {
        font-size: 1.5rem
    }
    .jumbotron .container {
        padding: 5px 2px 12px
    }
    form#bootstrap-override .row .col-4,
    form#rings .row .col-4,
    form#rsvp .row .col-4 {
        font-size: .98rem
    }
    .mobile-hidden {
        display: none;
        visibility: hidden
    }
    .custom-control-description {
        font-size: 1rem
    }
    .custom-select,
    .input-group-btn,
    form#bootstrap-override .input-group.input-file input,
    form#bootstrap-override input,
    form#rings .input-group.input-file input,
    form#rings input,
    form#rsvp .input-group.input-file input,
    form#rsvp input {
        height: 28px
    }
    form#bootstrap-override .input-group.input-file input,
    form#rings .input-group.input-file input,
    form#rsvp .input-group.input-file input {
        padding: 0 0 0 10px
    }
    .btn.btn-choose {
        padding: 0 8px 0 4px;
        font-size: .9rem
    }
    .upload-row {
        margin-top: -10px
    }
    .form-control::placeholder {
        font-size: .85rem
    }
    .custom-select {
        padding: 0 0 0 4px;
        font-size: .8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
    a.hp-header-logo-name-text {
        font-size: 1.5rem
    }
    .hp-header-logo-moto-text {
        left: 4%
    }
}

@media (min-width:380px) {
    div.homepage-year-input {
        top: 33%;
        left: 64%
    }
}

@media (min-width:576px) {
    .container {
        width: 80%
    }
    .display-container {
        width: 90%
    }
    .jumbotron .container h1,
    .jumbotron .display-container h1 {
        font-size: 3.75rem
    }
    .jumbotron .container h2,
    .jumbotron .display-container h2 {
        font-size: 2.8rem
    }
    .jumbotron .container h3,
    .jumbotron .display-container h3 {
        font-size: 1.7rem
    }
    .jumbotron .container h4,
    .jumbotron .display-container h4 {
        font-size: 1.9rem
    }
    #main.container,
    #main.display-container {
        margin-top: 0px
    }
    form#bootstrap-override .row .col-4,
    form#rings .row .col-4,
    form#rsvp .row .col-4 {
        font-size: 1rem
    }
    .custom-control-description {
        font-size: 1.1rem
    }
    .custom-select {
        padding: 0 0 0 6px;
        font-size: .9rem
    }
    a.hp-header-logo-name-text {
        font-size: 1.7rem
    }
    .hp-header-logo-moto-text {
        font-size: 1rem
    }
    .mobile-hidden {
        display: inline-block;
        visibility: visible
    }
    form#pickASchoolForm span#form-caption {
        font-size: .9rem
    }
}

@media (min-width:768px) {
    .container {
        width: 60%
    }
    .display-container {
        width: 85%
    }
    .jumbotron .container h1,
    .jumbotron .display-container h1 {
        font-size: 3.8rem
    }
    .jumbotron .container h2,
    .jumbotron .display-container h2 {
        font-size: 2.7rem
    }
    .jumbotron .container h3,
    .jumbotron .display-container h3 {
        font-size: 1.7rem
    }
    .jumbotron .container h4,
    .jumbotron .display-container h4 {
        font-size: 2.1rem
    }
    form#bootstrap-override .row .col-4,
    form#rings .row .col-4,
    form#rsvp .row .col-4 {
        font-size: 1.1rem
    }
    .custom-select,
    .input-group-btn,
    form#bootstrap-override .input-group.input-file input,
    form#bootstrap-override input,
    form#rings .input-group.input-file input,
    form#rings input,
    form#rsvp .input-group.input-file input,
    form#rsvp input {
        height: 30px
    }
    .btn.btn-choose {
        font-size: 1rem
    }
    .form-control::placeholder {
        font-size: .98rem
    }
    a.hp-header-logo-name-text {
        font-size: 1.9rem
    }
    .hp-header-logo-moto-text {
        font-size: 1.25rem
    }
    div.homepage-year-input {
        width: 250px;
        top: 36%;
        left: 62%
    }
    input#pickClassOf {
        width: 120px;
        height: 40px;
        padding-left: 12px
    }
    div.homepage-year-input label {
        margin-right: 10px;
        font-size: 1.2rem
    }
}

@media (min-width:992px) {
    .container {
        width: 52%
    }
    .display-container {
        width: 80%
    }
    .jumbotron .container h1,
    .jumbotron .display-container h1 {
        font-size: 4rem
    }
    .jumbotron .container h3,
    .jumbotron .display-container h3 {
        font-size: 2.05rem
    }
    .jumbotron .container h4,
    .jumbotron .display-container h4 {
        font-size: 2.4rem
    }
    form#bootstrap-override .row .col-4,
    form#rings .row .col-4,
    form#rsvp .row .col-4 {
        font-size: 1.2rem
    }
    .custom-select,
    .input-group-btn,
    form#bootstrap-override .input-group.input-file input,
    form#rings .input-group.input-file input,
    form#rings input,
    form#rsvp input {
        height: 32px
    }
    .btn.btn-choose {
        font-size: 1.1rem
    }
    .form-control::placeholder {
        font-size: 1rem
    }
    a.hp-header-logo-name-text {
        font-size: 2rem
    }
    .hp-header-logo-moto-text {
        font-size: 1.4rem
    }
}

@media (min-width:1200px) {
    .container {
        width: 48%
    }
}

@media (min-width:1350px) {
    .jumbotron .container h2,
    .jumbotron .display-container h2 {
        font-size: 3rem
    }
}

@media (min-width:1700px) {
    .page-curl:after,
    .page-curl:before {
        width: 30%
    }
}