/************************* GENERAL ITEMS *************************/
@-ms-viewport {
    width: device-width;
}

/***************************** COLORS ****************************/
:root {
    --light-1: hsl(40, 43%, 98%);
    --light-2: hsl(20, 16%, 85%);
    --light-3: hsl(11, 47%, 74%);
    --medium-1: hsl(2, 77%, 48%);
    --dark-1: hsl(349, 74%, 41%);
    /* --dark-1: hsl(2, 61%, 44%); */
    --dark-2: hsl(3, 45%, 56%);
    --dark-3: hsl(20, 17%, 11%);
    --dark-4: hsl(3, 26%, 18%);
    --highlight: hsl(48, 90%, 51%);
    --button-color-light: var(--medium-1);
    --button-color-dark: var(--dark-1);
    --table-border-color: var(--medium-1);
    --main-header-font: 'Cinzel', serif;
    --sub-header-font: 'Gudea', sans-serif;
    --sub-header-font-weight: 700;
    --text-font: 'Shippori Mincho', sans-serif;
    --main-font-size: calc(13px + 0.25vw + 0.25vh);
    --main-font-weight: 500;
    --menu-font: var(--sub-header-font), sans-serif;
    --menu-font-size: calc(12px + 0.25vw + 0.25vh);
    --li-font-size: calc(12px + 0.25vw + 0.25vh);
    --field-help-font-size: calc(11px + 0.2vw);
}

html {
    box-sizing: border-box;
    -ms-overflow-style: scrollbar;
    scroll-behavior: smooth;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    background: url("/static/grid_complete/img/background_paper.jpg");
}
p, textarea, label, input, a, td, select, figcaption {
    font-family: var(--text-font);
    color: var(--dark-3);
    font-size: var(--main-font-size);
    font-weight: var(--main-font-weight);
    line-height: 1.6;
}
input[type="radio"] {
    /* Make the radio button circle invisible */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Set the default circle color */
    border: 2px solid var(--dark-3);
    border-radius: 50%;
    height: 20px;
    width: 20px;
    margin-right: 5px;
    outline: none;
    cursor: pointer;
}
label:has(input[type="radio"]) {
    cursor: pointer;
}
  input[type="radio"]:checked:before {
    /* Change the dot color when the radio button is selected */
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--dark-3);
    display: inline-block;
    position: relative;
    top: -6px;
    left: 3px;
  }
textarea, label, input, a, td {
    margin: 0;
}
p {
    margin: 0 0 calc(10px + 0.25vw) 0;
}
/* p, textarea, label, figcaption, input:not([type="submit"]), td {
    text-shadow: 1px 1px 0px var(--light-2);
} */
label span {
    text-shadow: none;
}
a {
    text-decoration: none;
}
p a, .block-paragraph a {
    border-bottom: 1px dotted;
    color: var(--dark-1);
}
figcaption {
    text-align: center;
    margin-top: 0.5rem;
    font-size: calc(11px + 0.2vw);
    font-weight: 600;
}
figure {
    display: block;
    margin-block-start: 0.5rem;
    margin-block-end: 0.5rem;
    margin-inline-start: 0.5rem;
    margin-inline-end: 0.5rem;
}
.fine-print {
    font-size: calc(10px + 0.2vw);
}
:required:not([type="radio"]):not([type="checkbox"]) {
    box-shadow: inset 5px 0 10px -4px var(--highlight);
}
hr {
    margin-block: 2rem 1.5rem;
}
/* NOTE:  header tags are defined here generally, but colors and other attributes are sometimes changed in other contexts. */
h1 {
    font-family: var(--main-header-font);
    line-height: 1.5;
    color: var(--dark-4);
    font-weight: 600;
    text-align: center;
    margin: 1vw 0 calc(1.5rem + 1.25vw + 1.25vh) 0;
    font-size: calc(20px + 0.65vw + 0.65vh);
    text-wrap-style: balance;
    text-transform: uppercase;
    word-spacing: calc(1px + 0.4vw);
    text-shadow: 1px 1px 0px var(--light-2);
}

h2 {
    font-family: var(--sub-header-font);
    line-height: 1.3;
    color: var(--dark-1);
    font-size: calc(20px + 0.6vw);
    margin: calc(20px + 0.6vw) 0 calc(8px + 0.25vh) 0;
    font-weight: var(--sub-header-font-weight);
}
h2:first-child {
    margin-top: 0;
}
h2 > span {
    color: var(--dark-1);
    font-size: calc(18px + 0.5vw);
    margin-left: 6px;
}
.offpage-link {
    border-bottom: none;
}
.offpage-link:hover {
    border-bottom: 1px dotted;
}
.link-icon:has(+ .offpage-link) {
    font-size: calc(12px + 0.5vw);
    margin-right: 0.3rem;
}
h2:has(> .link-icon) {
    text-indent: -30px;
    margin-left: 35px;
    margin-bottom:0.7rem;
    line-height: 0.9;
}
h3 {
    font-family: var(--sub-header-font);
    line-height: 1.3;
    color: var(--dark-1);
    font-size: calc(16px + 0.5vw);
    margin: calc(6px + 0.5vw) 0  calc(0.25vw) 0;
    font-weight: var(--sub-header-font-weight);
}
h4 {
    font-family: var(--sub-header-font);
    line-height: 1.15;
    color: var(--dark-1);
    font-size: calc(14px + 0.25vw);
    margin: calc(6px + 0.25vw) 0  calc(0.15vw) 0;
    font-weight: var(--sub-header-font-weight);
}
h5 {
    font-family: var(--sub-header-font);
    line-height: 1;
    color: var(--dark-1);
    font-size: calc(12px + 0.25vw);
    margin: calc(6px + 0.25vw) 0  calc(0.15vw) 0;
    font-weight: var(--sub-header-font-weight);
}
h3 + form {
    margin-top: calc(6px + 0.5vw);
}
h3 > span {
    color: var(--highlight);
    font-size: calc(11px + 0.5vw);
    margin-left: 5px;
}
[class^="block-"] ul {
    color: var(--dark-3);
}
[class^="block-"] ul, [class^="block-"] ol {
    font-family: var(--text-font);
    text-shadow: 1px 1px 0px var(--light-2);
    font-size: var(--li-font-size);
}
[class^="block-"] > div > ul > li {
    list-style-image: url('/static/grid_complete/img/vidocq_V2_2019_logo_symbol_only_dark_15px.png');
    margin-bottom: 3px;
}
[class^="block-"] li ul {
    margin-top: 5px;
}
/* Change to small squre for list style image on indented <li>s */
[class^="block-"] li > ul > li {
    list-style-image: none;
}
[class^="block-"] li > ul > li:before {
    font-family: FontAwesome;
    content: "\f111";
    font-size: 0.5rem;
    color: var(--dark-1);
    margin-left: calc(0px - 22px - 0.225vw);
    margin-right: calc(8px + 0.11vw);
}

input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea, select {
    background: none;
    width: 100%;
    padding: calc(6px + 0.35vw) calc(8px + 0.35vw);
    outline: none;
    border: 1px solid var(--button-color-dark);
}
div > input[type="text"], div > input[type="password"], div > input[type="email"], div > input[type="url"], div > textarea, div > select {
    margin: 0 0px calc(5px + 1vw) 0;
}
/* padding on selects has to be slightly different than inputs in order to appear correctly in forms */
select {
    box-sizing: border-box;
    padding: calc(10.5px + 0.35vw) calc(5px + 0.35vw);
}
/* .btn, .btn-info, .btn-secondary are only here because of the two_factor library templates */
input[type="submit"], button, .button:not(.secondaryAction), .btn {
    font-family: var(--text-font);
    border: none;
    color: var(--light-1);
    padding: calc(8px + 0.35vw) calc(20px + 0.35vw);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--main-font-size);
    background: var(--button-color-dark);
    text-transform: uppercase;
}
input[type="submit"].compact, button.compact, .button:not(.secondaryAction).compact, .btn-info, .btn-secondary {
    padding: calc(4px + 0.35vw) calc(10px + 0.35vw);
}
.scrolling-wrapper {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-bottom: calc(10px + 0.25vw);
}
.scrolling-wrapper table {
    min-width: 100%;
}
.account-subnav button, .account-subnav .button {
    background: var(--button-color-light);
    color: var(--light-2);
}
.account-subnav .active {
    background: var(--button-color-dark);
    color: var(--light-1);
}
a.button {
    border-bottom: none;
    white-space: nowrap;
}
a.button i {
    margin-right: calc(3px + 0.4vw);
}
.button-holder {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.button-holder.spaced {
    gap: 20px;
}
@media screen and (max-width: 354px) {
    .button-holder {
         flex-direction: column;
         width: 100%;
    }
    .button-holder button, .button-holder .button {
         width: 100%;
         margin-right: 0 !important;
         text-align: center;
    }
}
p + .button-holder {
    margin-top: calc(1rem + 0.75vw);
    margin-bottom: 1rem;
}
.css-columns + .button-holder {
    margin-top: calc(0.4rem + 1vw);
    margin-bottom: 1rem;
}
/*********************** Bands ***********************/
.band-type-1 {
    background: var(--light-1);
}
.band-type-2  {
    background-color: var(--dark-4);
}

/*********************** Header ***********************/
/* The height is applied to the #header divs (in addition to the #header) in the following because of IE */
#header {
    display: -ms-grid;
    display: grid;
    grid-template-columns: calc(160px + 1.5vw) 1fr calc(160px + 1.5vw);
}
#header a {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* The following line is necessary because the divs were taking on a height slightly greater than the header at smaller resolutions when these divs are defined as display:flex and the height was defined on the #header*/
#header > div:nth-of-type(1) {
    -ms-grid-column: 1;
}
#header > div:nth-of-type(2) {
    -ms-grid-column: 2;
    padding: calc(5px + 0.25vw) 2vw;
}
#header > div:nth-of-type(3) {
    -ms-grid-column: 3;
}
#header div a {
    border-bottom: none;
    width: auto;
    height: auto;
    line-height: 0;
}
#header div:nth-of-type(1) {
    padding: 5% 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header div:nth-of-type(1) img {
    height: auto;
    width: 100%;
}
#header div:nth-of-type(2) img {
    height: auto;
    width: 100%;
    z-index: 999;
}
#header div:nth-of-type(3) img {
    height: 100%;
    width: auto;
}
#header div:nth-of-type(2) {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#header.contained-left div:nth-of-type(2) {
    padding: calc(5px + 0.25vw) calc(2vw + 10vw) calc(5px + 0.25vw) 2vw;
}
#header cite{
    font-family: var(--main-header-font);
    font-size: calc(2.5vw + 2.5vh);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--highlight);
    line-height: calc(20px + 1.5vw + 1.5vh);
    margin: 0;
    z-index: 999;
    text-wrap-style: balance;
    /* The following achieves a raised look */
    text-shadow: -1px -1px 0 #fff,
     1px  1px 0 #000,
    -1px  0px 0 #D6CBC8,
     1px  0px 0 #D6CBC8,
     0px -1px 0 #D6CBC8,
     0px  1px 0 #D6CBC8;
    width: 100%; /* needed for IE */
}
.pre-cite, .post-cite {
    display: block;
    line-height: 1.2;
}
.pre-cite {
    font-size: calc(16px + 0.25vw);
    margin-left: 17vw;
    text-align: left;
}
.post-cite {
    font-size: calc(10px + 1vw + 1vh);
    text-align: center;
    margin-top:  0.6rem;
    color: var(--light-1);
    font-weight: 500;
    letter-spacing: 0;
    text-shadow: none;
}
#header div:nth-of-type(3) {
    display: flex;
    justify-content: flex-end;
}
@media only screen and (max-width: 1023px) {
    #header {
        grid-template-columns: calc(160px + 1.5vw) 1fr 0px;
    }
    #header div:nth-of-type(3) {
        display: none;
    }
    #header.contained-left div:nth-of-type(2) {
        padding: calc(5px + 0.25vw) 2vw;
    }
}
@media only screen and (max-width: 534px) {
    #header {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        place-items: center;
        padding-left: 0;
        max-height: unset;
        /* grid-auto-rows: calc(90px + 2.5vh); */
    }
    /* #header div:nth-of-type(2) { */

    #header div:nth-of-type(3) {
        display: none;
    }
    #header div:nth-of-type(1) {
        padding-block-end: 0 !important;
    }
    #header div:nth-of-type(1) img {
        max-height: 175px;
        width: auto;
    }
    #header div:nth-of-type(2) {
        padding: 1rem 0.5rem !important;
    }
    #header div:nth-of-type(2) a {
        display: block;
    }
    #header div:nth-of-type(2) p {
        display: none;
    }
}
@media only screen and (min-width: 535px) {
    #header {
        grid-gap: 15px;
    }
    #header div:nth-of-type(2) a {
        display: none;
    }
    #header div:nth-of-type(2) p {
        display: block;
    }
}
@media only screen and (max-width: 1180px) {
    #header {
        max-height: unset;
    }
}

/*********************** Footer ************************/
#footer {
    background: linear-gradient(180deg, var(--medium-1) 0%, var(--dark-1) 2%, var(--dark-1) 97%, rgba(88,83,54,1) 100%);
    padding-block: calc(1.5vw + 1.5vh);
}
#footer h2 {
    margin: 0 0 calc(5px + 0.5vw) 0;
    color: var(--light-1);
    font-size: calc(16px + 0.2vw);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
#footer ul {
    font-size: var(--main-font-size);
    margin: 0.3rem 0;
    padding: 0 0 0 calc(22px + 0.225vw);
}
#footer li {
    list-style-type: none;
    list-style-image: url(/static/grid_complete/img/wagon_wheel_16px.png);
}
#footer li, #footer li a {
    color: var(--light-2);
    margin-bottom: 5px;
}
#footer li a {
    -webkit-transition: padding-left 0.4s ease-in-out, color 0.2s linear; /* Safari */
    transition: padding-left 0.4s ease-in-out, color 0.2s linear;
    text-transform: uppercase;
    border-bottom: none;
}
#footer li a:link {
    text-decoration: none;
}
#footer li a:hover {
    padding-left: 12px;
    text-decoration: none;
    font-weight: bold;
    color: white;
}

#copyright_statement {
    text-align: center;
    color: var(--light-1);
    font-family: var(--text-font);
    font-size: calc(14px + 0.2vw);
    text-wrap-style: balance;
}
.columns #copyright_statement {
    text-align: left;
}
#social_media_links {
    display: flex;
    justify-content: center;
}
#social_media_links a {
    margin: 0 calc(4px + 0.5vw);
}
#social_media_links i {
    color: var(--light-1);
    font-size: calc(14px + 0.4vw);
}
#footer_line_links {
    display: flex;
    justify-content: center;
}
#footer_line_links a {
    text-decoration: none;
    color: var(--light-1);
    border: none;
    font-size: calc(14px + 0.2vw);
}
#footer_line_links a:not(:last-child) {
    margin-right: 4rem;
}

/***************************** GENERAL FORM ITEMS *******************************/
/* Don't apply general <form> items to a .special-form forms (e.g. logout or delete forms) */
form:not(.special-form) {
    width: 100%;
}
/* Buttons directly in forms need top margin applied so that they flow properly with the other items <p>s in the form */
form:not(.special-form) > button, form:not(.special-form) > .button, form:not(.special-form) > input[type="submit"] {
    margin-top: calc(20px + 0.4vw);
}
form p {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
form ~ p {
    margin-top: calc(5px + 1vw);
}
form li input[type="checkbox"], form li input[type="radio"] {
    width: calc(10px + 0.75vw);
    height: calc(10px + 0.75vw);
}
/* The following two declarations keep content such as radio buttons grouped with their label */
.fieldWrapper {
    page-break-inside: avoid;
}
.fieldWrapper label {
    display: inline-block;
}
.fieldWrapper ul {
    margin-top: 0;
    padding-top: 6px;
}
.fieldWrapper .help {
    font-size: var(--field-help-font-size);
    margin-top: -1vw;
}
.fieldWrapper:has([type="checkbox"]) {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-top: 27px;
    margin-bottom: 30px;
}
.fieldWrapper:has([type="checkbox"]) input {
    margin-right: 10px;
    width: 25px;
}
/* .css-columns is placed on the <form> element if embedding the submit button within the columns (odd-number of fields) and is placed on a <div> tag wrapping the fields when there is an even number of form elements and so the submit button is centered below the fields. */
.css-columns {
    width: 100% !important;
}
.two.css-columns {
    column-count: 2;
    column-width: 215px;
}
.three.css-columns {
    column-width: 230px;
    column-count: 3;
}
.four.css-columns {
    column-width: 245px;
    column-count: 4;
}
/* Render buttons within css-columns at full width */
.css-columns button, .css-columns input[type="submit"] {
    width: 100%;
}
@media screen and (max-width: 567px) {
    .css-columns {
        padding-left: 0;
        padding-right: 0;
    }
}

/********************************** ALERT BOX ************************************/
.alert-box {
    font-family: "Open Sans";
    padding: calc(8px + 0.25vw) calc(12px + 0.25vw);
    margin-bottom: calc(10px + 1.25vw);
    border-radius: 2px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 4px 4px 12px #888888;
}
.alert-box.success {
    background: green;
}
.alert-box i.fa-times {
    cursor: pointer;
}

/*********************** Banner for pages other than home page ***********************/
#page_banner {
    /* NOTE:  background: url()  is set in Wagtail settings and rendered in the HTML */
    height: 15vmin;
    margin-bottom: 5px;
    background-repeat: no-repeat;
}
@media screen and (min-width: 1312px) {
    #page_banner {
        background-size: 100%;
        background-position: center 8%;
        background-attachment: fixed;
    }
}
@media screen and (max-width: 1311px) {
    #page_banner {
        background-size: cover;
        background-position: center 40%;
    }
}

/*********************** Storyboard ***********************/
/* NOTE:  The Storyboard is typically shown on the home page, so the <h1> tag is treated separately within the storyboard so that it can be used as the subject of the home. */
@keyframes zoomInOut {
    0% {
      background-size: 100%;
    }
    2% {
      background-size: 100%;
    }
    50% {
      background-size: 120%;
    }
    100% {
      background-size: 100%;
    }
}
.storyboard .slide {
    display: flex;
    position: relative;
    width: 100%;
    padding: calc(1.5vw + 1.5vh) calc(1vw + 1vh);
}
.storyboard .slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 0vw;
    background-attachment: fixed;
    background-image: inherit;
    filter: brightness(0.3);
    z-index: 0;
}
@media screen and (min-aspect-ratio:4/3) {
    .storyboard .slide::before {
        background-position: center calc(-10vw + 2vh);
    }
}
@media screen and (min-aspect-ratio:4/3)  and (max-width:1450px) {
    .storyboard .slide::before {
        background-position: center calc(-8vw + 6vh);
    }
}
@media screen and (max-aspect-ratio:3/4) and (max-width:820px) {
    .storyboard .slide::before {
        background-position: center calc(-20vh + 10vw);
    }
}
@media screen and (max-aspect-ratio:3/4) and (min-width:821px) {
    .storyboard .slide::before {
        background-position: center calc(-1vh + 10vw);
    }
}
@media screen and (max-aspect-ratio:9/16) {
    .storyboard .slide::before {
        background-position: center calc(-20vh + 15vw);
    }
}
@media screen and (max-aspect-ratio:7/16) {
    .storyboard .slide::before {
        background-position: center 1vh;
    }
}
.storyboard .slide:first-of-type .word-block {
    opacity: 0;
    animation: fadeIn 3s linear 2.5s forwards;
}
@keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}
@media screen and (min-width: 850px) {
    .storyboard .slide::before {
        animation: zoomInOut 80s linear infinite;
    }
}
.storyboard .word-block {
    position: relative;
    z-index: 1;
    padding:  calc(3rem + 0.5vw + 0.5vh) calc(1rem + 0.25vw + 0.25vh) calc(1rem + 0.25vw + 0.25vh) calc(1rem + 0.25vw + 0.25vh);
    text-align: center;
    background: radial-gradient(ellipse farthest-side at center center, rgba(55,55,55,0.55) 80%, rgba(55,55,55,0) 100%);
}
.storyboard .word-block p {
    font-family: var(--main-header-font);
    font-size: calc(1.25rem + 0.45vw + 0.45vh);
    font-weight: 500;
    color: var(--light-1);
    line-height: 1.1;
    text-shadow: -1px -1px 0 var(--dark-1), 1px -1px 0 var(--dark-1), -1px 1px 0 var(--dark-1), 1px 1px 0 var(--dark-1);
    text-wrap-style: balance;
}
.storyboard .word-block p.special-message {
    text-shadow: -0.5px -0.5px 0 var(--light-4), 0.5px -0.5px 0 var(--light-4), -0.5px 0.5px 0 var(--light-4), 0.5px 0.5px 0 var(--light-4);
    margin-bottom: 0;
}
.storyboard .word-block a {
    border-bottom: 1px dotted var(--light-1);
    font-size: calc(1rem + 0.5vw);
}
.storyboard .word-block h1 {
    font-size: calc(18px + 1vw);
    color: var(--highlight);
    margin: 0;
}
.storyboard .word-block p:nth-child(2) {
    font-size: calc(15px + 1.5vw + 1.5vh);
    color: var(--highlight);
}
.storyboard .word-block p:nth-child(n+3), .storyboard .word-block p:nth-child(n+3) * {
    font-size: calc(9px + 0.8vw);
    font-weight: bold;
    line-height: 1.2;
    color: var(--highlight);
}
.storyboard .slide.words-top-left {
    align-items: flex-start;
    justify-content: flex-start;
}
.storyboard .slide.words-top-center {
    align-items: flex-start;
    justify-content: center;
}
.storyboard .slide.words-top-right {
    align-items: flex-start;
    justify-content: flex-end;
}
.storyboard .slide.words-center-left {
    -webkit-box-align: center;
    align-items: center;
}
.storyboard .slide.words-center-center {
    -webkit-box-align: center;
    align-items: center;
    justify-content: center;
}
.storyboard .slide.words-center-right {
    -webkit-box-align: center;
    align-items: center;
}
.storyboard .slide.words-bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
}
.storyboard .slide.words-bottom-center {
    align-items: flex-end;
    justify-content: center;
}
.storyboard .slide.words-bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
}
/* Align words based upon location on the slide */
.storyboard .slide[class$="center"] .word-block > * {
    text-align: center;
}
.storyboard .slide[class$="right"] .word-block > * {
    text-align: center;
}
.storyboard .slide[class$="left"] .word-block > * {
    text-align: left;
}

@media screen and (max-width:634px) {
    .storyboard .slide {
        align-items: center !important;
        justify-content: center !important;
    }
    .storyboard .slide .word-block {
        max-width: 82vw;
    }
    .storyboard .slide .word-block * {
        text-align: center !important;
    }
}
@media screen and (min-width:635px) and (max-width:785px) {
    .storyboard .slide .word-block {
        max-width: 57vw;
    }
}
@media screen and (min-width:786px) and (max-width:999px) {
    .storyboard .slide .word-block {
        max-width: 63vw;
    }
}
@media screen and (min-width:1000px) and (max-width:1199px) {
    .storyboard .slide .word-block {
        max-width: 54vw;
    }
}
@media screen and (min-width:1200px) and (max-width:1399px){
    .storyboard .slide .word-block {
        max-width: 48vw;
    }
}
@media screen and (min-width:1400px) {
    .storyboard .slide .word-block {
        max-width: 44vw;
    }
}

/*********************** summary_blocks ***********************/
#summary_blocks {
/* summary_blocks is made up of a general band-type-..., but don't want the top margin of 5px - want it against the storyboard */
    margin-top: -5px;
}
@supports (display: grid) {
    #summary_blocks {
        height: unset;
    }
}
/* NOTE:  Add the following to have individual blocks within summary_blocks be wider when single column/small screen - won't align with footer blocks though */
/* @media screen and (max-width: 449px) {
    #summary_blocks.blocks div {
        padding: 0 5vw;
    }
} */
/* The following is in a feature query because of a problem with IE.  NOTE:  Using display:grid to check whether browser is IE */
@supports (display:grid) {
    #summary_blocks > div {
        display: flex;
        flex-direction: column;
    }
}
#summary_blocks h2 { /* override h2 font size within summary_blocks */
    font-size: calc(12px + 0.5vw);
    text-transform: uppercase;
}
#summary_blocks > div img:not(.png-overlay) {
    width: 90%;
    height: auto;
}
a.img-link {
    border-bottom: none;
}

/* Handle re-ordering of summary_blocks at the point at which stacking and doubling of four blocks occurs */
@media screen and (max-width: 991px) {
    #summary_blocks > div:nth-of-type(1) {
        order: 3 !important;
        -ms-grid-column: 1;
    }
    #summary_blocks > div:nth-of-type(2) {
        order: 1 !important;
        -ms-grid-column: 1;
    }
    #summary_blocks > div:nth-of-type(3) {
        order: 2 !important;
        -ms-grid-column: 2;
    }
    #summary_blocks > div:nth-of-type(4) {
        order: 4 !important;
        -ms-grid-column: 2;
    }
    #summary_blocks > div img:not(.png-overlay) {
        width: 100% !important;
    }

}

.img-wrapper img {
    width: 100%;
    height: auto;
}
.img-wrapper .img-title {
    font-family: var(--text-font);
    color: rgb(57,58,28);
    font-size: var(--main-font-size);
    line-height: 1.15;
    text-align: center;
}

.sidebar .img-wrapper {
    margin-bottom: calc(8px + 0.5vw);
}

/************************** FORM ERROR MESSAGES ***************************/
.errorlist {
    margin-bottom: 5px;
    color: red;
    font-family: var(--text-font);
    font-size: calc(11px + 0.2vw);
}
/**************************** Django messages *****************************/
.messages {
    text-align: center;
    list-style-type: none;
    padding: 0;
    color: var(--melanzane);
    font-family: var(--text-font);
    font-size: calc(15px + 0.2vw);
    font-weight: bold;
}

/*********************** NOT FOUND PAGES (404, 500) ***********************/
.not-found {
    min-height: 30vmin;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.not-found a {
    font-size: calc(15px + 1vw);
    border-bottom: none;
    color: rgb(100,100,100);
    font-family: "OpenSans", sans-serif;
    text-transform: uppercase;
}
.not-found a i {
    font-size: calc(20px + 1vw);
}

/************************ TABLES (GENERAL) ***********************/
table {
    border-spacing: 0;
    font-family: var(--text-font);
}
thead th {
    background: var(--button-color-dark);
    color: var(--light-1);
    padding: 0.5vw 1vw;
    font-size: calc(12px + 0.2vw);
}
thead th:not(:last-of-type) {
    border-right: 1px solid var(--table-border-color);
}
table form {
    width: auto !important;
}
td {
    font-size: calc(12px + 0.2vw);
    border-bottom: 2px solid var(--table-border-color);
    padding: 0.5vw 1vw;
    white-space: nowrap;
}
td a, td button {
    border-bottom: none;
    color: var(--button-color-light);
    margin: 0 !important;
    padding: calc(3px + 0.25vw) calc(5px + 0.25vw);
    background: transparent;
    border-radius: 3px;
}
td a:hover, td button:hover {
    color: white;
    background: var(--button-color-dark);
}
/*********************** IMAGE GALLERY PAGE ***********************/
.image-group-selector {
    display: flex;
    justify-content: flex-start;
    gap: 0.6rem 0.5rem;
    flex-wrap: wrap;
}
.image-group-selector span {
    cursor: pointer;
    box-shadow: 4px 4px 12px #888888;
}
.image-group-selector.collections span {
    font-family: "OpenSans", sans-serif;
    font-size: calc(14px + 0.25vw);
    font-weight: 600;
    background-color: var(--dark-1);
    color: var(--light-1);
    border-radius: 3px;
    padding: calc(4px + 0.25vw) calc(5px + 0.5vw);
}
.image-group-selector.tags span {
    font-family: "OpenSans", sans-serif;
    font-size: calc(11px + 0.25vw);
    font-weight: 600;
    background-color: var(--light-4);
    color: var(--dark-3);
    border-radius: 3px;
    padding: calc(3px + 0.25vw) calc(4px + 0.5vw);
}
#image_grid div {
    margin-bottom: 0;
}
#image_grid img {
    width: 100%;
}
#image_grid.two.columns div {
    width: 50%;
    padding: 0 18px 18px 0;
}
#image_grid.three.columns div {
    width: 33.3%;
    padding: 0 calc(4px + 0.3vw) calc(2px + 0.2vw) 0;
}
#image_grid.four.columns div {
    width: 25%;
    padding: 0 calc(5px + 0.25vw) calc(3px + 0.25vw) 0;
}
#image_grid.five.columns div {
    width: 20%;
    padding: 0 calc(5px + 0.25vw) calc(3px + 0.25vw) 0;
}
/* The above xxxx.columns div's are rendered at a certain number of columns, but the number of columns is reduced via changing percentages as screen width narrows. */
@media screen and (max-width: 767px) {
    #image_grid.five.columns div {
        width: 25%;
        padding: 0 calc(5px + 0.25vw) calc(3px + 0.25vw) 0;
        }
}
@media screen and (max-width: 575px) {
    #image_grid.four.columns div, #image_grid.five.columns div {
        width: 33.3%;
        padding: 0 calc(4px + 0.3vw) calc(2px + 0.2vw) 0;
    }
}
@media screen and (max-width: 450px) {
    #image_grid.three.columns div, #image_grid.four.columns div, #image_grid.five.columns div {
        width: 50%;
        padding: 0 calc(4px + 0.3vw) calc(2px + 0.2vw) 0;
    }
}
@media screen and (max-width: 275px) {
    #image_grid.two.columns div, #image_grid.three.columns div, #image_grid.four.columns div, #image_grid.five.columns div {
        width: 100%;
        padding: 0;
    }
}
#image_grid img {
    width: 100%;
    border-radius: 4px;
}
#image_grid a {
    border-bottom: none;
}
.slbElement button:focus {
    outline: none;
}
.slbCaption {
    font-size: calc(12px + 0.5vw) !important;
    bottom: 1.4rem !important;
    font-family: "OpenSans", sans-serif !important;
}

/********************** Contact Form ***********************/
#contact_form form {
    display: flex;
}
/* Because of the random creation of empty <p> elements, etc., the general styling for .g-recaptcha does not work within the Contact form */
#contact_form form .g-recaptcha {
    margin: 0 0 calc(5px + 1vw) 0;
}
#contact_form form > div {
    display: flex;
    flex-direction: column;
}
#contact_form h2 {
    text-align: center;
    margin-bottom: calc(10px + 1vw);
    font-size: calc(18px + 0.5vw)
}
@media screen and (max-width: 575px) {
    #contact_form form {
        flex-direction: column;
        align-content: center;
    }
    #contact_form form > div {
        width: 100%;
    }
    #contact_form form textarea {
        margin: 0 0 calc(5px + 1vw) 0;
    }
}
@media screen and (min-width: 576px) {
    #contact_form form {
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
    }
    #contact_form form > textarea {
        width: 65%;
        margin-bottom: 0;
    }
    #contact_form form > div {
        width: 30%;
    }
}

/* Don't show "Remember me" checkbox that comes through from Allauth or any Django help_text in multi-column layout (throws off layout) */
#id_remember, label[for="id_remember"] {
    display: none !important;
}
.css-columns .helptext {
    display: none !important;
}
/* Also not currently displaying ANY Django help_text */
.helptext {
    display: none !important;
}
/************************ Emails *************************/
/* Override user agent stylesheet default */
form.email_list, form fieldset {
    border: none !important;
    width: 100% !important;
}
form.email_list .verified {
    margin-left: 10px;
}
form.email_list .verified, form.email_list .primary {
    margin-top: 2vw;
    font-family: "OpenSans", sans-serif;
    font-size: calc(11px + 0.25vw);
    color: white;
    background-color: rgb(62,5,55);
    border-radius: 2px;
    margin-right: 10px;
    padding: calc(3px + 0.25vw) calc(4px + 0.5vw);
    box-shadow: 4px 4px 12px #888888;
}

/************************* ADDRESSES TABLE **************************/
table.address {
    min-width: 100%;
}
table.address thead tr th:nth-child(1), table.address thead tr th:nth-child(2), table.address thead tr th:nth-child(4), table.address tbody tr th:nth-child(1), table.address tbody tr th:nth-child(2), table.address tbody tr th:nth-child(4) {
    text-align: left;
}
table.address thead tr td:nth-child(3), table.address thead tr td:nth-child(5), table.address thead tr td:nth-child(6), table.address thead tr td:nth-child(7), table.address tbody tr td:nth-child(3), table.address tbody tr td:nth-child(5), table.address tbody tr td:nth-child(6), table.address tbody tr td:nth-child(7), table.address tbody tr td:nth-child(6), table.address tbody tr td:nth-child(8) {
    text-align: center;
}

/************************** MEMBERSHIP MANAGEMENT *************************/
#membership_mgt {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#current_ad {
    margin: 0 0 calc(10px + 0.25vw) 0;
}
/* Center content in Membership History and Advertising History - :not(last-of-type) is necessary so that the Pay section isn't picked up when not including advertising */
#membership_mgt > div:nth-last-child(2), #membership_mgt > div:nth-last-child(2) ~ div {
    min-width: 300px;
    width: 50%;
}
#membership_mgt > div:nth-last-child(3), #membership_mgt > div:nth-last-child(3) ~ div {
    min-width: 200px;
    width: 33%;
}
#membership_mgt > div:nth-of-type(1), #membership_mgt > div:nth-of-type(2):not(last-of-type) {
    padding: 0 calc(15px + 1vw) calc(5px + 1vw) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#membership_mgt table th, #membership_mgt table td {
    text-align: center;
}
#membership_mgt h3 {
    text-align: center;
    margin: 0 0 calc(10px + 0.25vw) 0;
}
#membership_mgt table {
    margin: calc(6px + 0.2vw) 0 calc(10px + 1vw) 0;
}
@media screen and (max-width: 435px) {
    #membership_mgt > div {
        padding: 0 !important;
        margin-bottom: calc(5px + 1vw);
        width: 100%;
    }
    .scrolling-wrapper {
        width: auto;
    }
}
#pay_now_wrapper {
    width: 100%;
}

@media screen and (max-width: 449px) {
    .narrow-form {
        padding-left: 2vw;
        padding-right: 2vw;
    }
}
@media screen and (min-width: 450px) and (max-width: 549px) {
    .narrow-form {
        padding-left: 3vw;
        padding-right: 3vw;
    }
}
@media screen and (min-width: 550px) and (max-width: 650px) {
    .narrow-form {
        padding-left: 5vw;
        padding-right: 5vw;
    }
}
@media screen and (min-width: 651px) and (max-width: 800px) {
    .narrow-form {
        padding-left: 10vw;
        padding-right: 10vw;
    }
}
@media screen and (min-width: 801px) and (max-width: 991px) {
    .narrow-form {
        padding-left: 18vw;
        padding-right: 18vw;
    }
}
@media screen and (min-width: 992px) and (max-width: 1919px) {
    .narrow-form {
        padding-left: 25vw;
        padding-right: 25vw;
    }
}
@media screen and (min-width: 1920px) {
    .narrow-form {
        padding-left: 30vw;
        padding-right: 30vw;
    }
}

/**************************** VARIOUS PAGE TYPES **************************/
/* Sidebar page with sidebar location (left or right) set in CMS */
.sidebar-section {
    display: flex;
    flex-direction: row;
    gap: 35px;
}
.sidebar-section .sidebar a:link {
    border-bottom: none;
}
.sidebar-section .sidebar h2:first-of-type {
    margin-top: 0;
    text-align: center;
}
@media screen and (min-width:768px) {
    .sidebar-section .sidebar {
        width: 25%;
    }
    .sidebar-section .content {
        width: 72%;
        margin-right: 3%;
    }
    .left.sidebar-section .sidebar {
        order: 1;
    }
    .left.sidebar-section .content {
        order: 2;
    }
    .right.sidebar-section .sidebar {
        order: 2;
    }
    .right.sidebar-section .content {
        order: 1;
    }
}
@media screen and (max-width:767px) {
    .sidebar-section {
        display: flex;
        flex-direction: column;
    }
        .sidebar-section > div {
        width: 100%;
    }
    .sidebar-section .sidebar {
        order: 2;
    }
    .sidebar-section .content {
        order: 1;
    }
}

#gmap {
    background: white;
    border: 1px solid rgb(99, 49, 20);
    padding: 4px;
    width: 100%;
    min-height: 300px;
    margin-top: 1rem;
}

.publication {
    display: grid;
    grid-template-columns: minmax(150px, 200px) minmax(150px, 1fr);
    grid-gap: 1rem;
    margin-bottom: calc(2rem + 1vh);
}
.publication .title {
    font-size: calc(15px + 0.4vw);
}
.publication .purchase.button {
    margin-top: calc(8px + 0.35vw + 1rem);
    margin-bottom: calc(8px + 0.35vw + 1rem);
}
.publication img {
    height: auto !important;
    width: auto !important;
}
.publication .author {
    line-height: 1.2;
    margin-bottom: 1rem;
}
.publication a:has(img) {
    max-height: 200px;
}
@media screen and (max-width: 860px) {
    .publication {
        display:flex;
        flex-direction: column;
    }
  }

.block-image_link a:link, .block-image_link a:hover, .block-image_link a:active, .block-image_link a:visited {
    border-bottom: none;
}

.complementary-styling {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.complementary-styling > div {
    padding: calc(10px + 0.25vw);
    background-color: rgb(242, 230, 217);
}
.complementary-styling > div > *:first-child {
    margin-top: 0;
}
.complementary-styling > div > *:last-child {
    margin-bottom: 0;
}

/************************* MEMBERSHIP app *************************/
.member-card {
    display: inline-block;
    width: 100%;
    line-height: 1.2;
}
.member-card span {
    display: block;
}
.member-card > span:first-of-type {
    font-weight: bold;
}

/************************** MISCELLANEOUS *************************/
.png-overlay {
    z-index: 999;
    position: absolute;
    width: 38%;
    height: auto;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.anchor-block a {
    border-bottom: none;
}
/* The following is needed to ensure the recaptcha is centered */
.g-recaptcha > div {
    width: 100% !important;
}
p.message {
    line-height: 1.2;
    border: 2px solid var(--button-color-light);
    padding: 7px;
    text-align: left;
}
/**************************** OVERRIDES ***************************/
/* There is an anomaly at narrowest size when scrolling-wrapper contains a table.  The narrowest (96vw) is not being honored, but when set to 92vw, it behaves OK. */
@media screen and (max-width: 449px) {
    .scrolling-wrapper {
        max-width: 92vw;
    }
}

/* The two_factor library renders its own headings in <h1> tags.  Re-style the <h1> to look like an <h2> since it appears below the account nav buttons.  (This is done in a generic way and so would apply on any page within the <h1> container element.) */
h1:not(:first-of-type) {
    font-family: var(--sub-header-font);
    line-height: 1.3;
    color: var(--dark-1);
    font-size: calc(20px + 0.6vw);
    margin: 0 0 calc(8px + 0.25vh) 0;
    font-weight: 500;
}
/* The following section is needed because of the two_factor library */
.btn {
    text-shadow: none;
    display: inline-block;
    height: auto;
}
.btn ~ p {
    margin-top: calc(20px + 0.6vw);
}
p:has(.btn) ~ h3 {
    margin-top: calc(20px + 0.6vw);
}
#account_security, #account_security form:has(> .btn, > button) {
    text-align: center;
}
#account_security form {
    text-align: left;
}
#account_security table {
    margin: auto;
}
#account_security table td {
    border-bottom: none;
}
#account_security ul {
    display: inline-block;
    text-align: left;
}
#account_security li {
    list-style-type: square;
    font-family: var(--text-font);
    color: var(--dark-1);
    font-size: var(--main-font-size);
    text-shadow: 1px 1px 0px var(--light-2);
}
#account_security .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
    gap: 50px;
}
li form {
    display: inline;
    margin-left:10px;
}
ul:has(form) {
    margin-top: 0;
}
.btn-sm {
    margin-top: 0 !important;
    margin-bottom: 7px !important;
    padding: 3px 6px !important;
    font-weight: unset !important;
    text-transform: unset !important;
}
/* The text is place directly over the image in such a way that the image resizes
#upcoming_events {
    display: grid;
}
#upcoming_events img {
    grid-area: 1 / 1 / 2 / 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
} */
.special-home-menu {
    position: relative;
    width: 100%;
    max-width: 18rem;
    margin: calc(1.5vw + 1.5vh) auto;
    border-radius: 5px;
    :is(h2, h3, h4, h5) {
        text-align: center;
    }
    p {
        line-height: 1.3;
    }
}
@media screen and (max-width: 1000px) {
    .special-home-menu {
        max-width: 80%;
    }
}

.special-home-menu ul li:not(:last-of-type) {
    border-bottom: 1px solid #AEA9A6;
}


.special-home-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 0;
    pointer-events: none;
}

.special-home-menu > * {
    position: relative;
    z-index: 1;
}

.storyboard + .two-2fr-1fr.columns > div:last-of-type > div {
    box-shadow: inset 5px 0 5px #f7f7ff, inset -5px 0 5px #f7f7ff;
}
.special-home-menu > div:first-of-type {
    /*Made up of two components: a header div and a content div */
    background-color: var(--dark-1);
    border-radius:  5px 5px 0 0;
    padding: calc(0.25rem + 0.25vw) calc(0.5rem + 0.5vw);
}
.special-home-menu > div:first-of-type :is(h2,h3,h4,h5) {
    color: var(--light-1);
    margin-bottom:0;
    font-family: var(--main-header-font);
}
.special-home-menu :is(ul, li) {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.special-home-menu ul {
    background-color: var(--light-2-opacity);
    padding: calc(0.25rem + 0.5vw);
    border-radius: 0 0 5px 5px;
}
.special-home-menu li:first-of-type h3 {
    margin-top: 0;
}
.special-home-menu li {
    h2, h3, h4, h5 {
        color: var(--dark-5);
    }
    p {
        color: var(--dark-5);
        text-shadow: unset;
    }
    p:last-of-type {
        margin-bottom: 0;
    }
}
.special-home-menu li:not(:first-of-type) h3 {
    border-top: 1px solid var(--dark-5);
    padding-top: 0.5rem;
}

/* Special Home Menu Styles */
.special-home-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.special-home-menu .menu-item {
    margin: 0;
}

.special-home-menu .menu-item a {
    display: flex;
    align-items: center;
    min-height: 3.1rem;
    padding: 0.75rem 1rem;
    color: var(--dark-1);
    text-decoration: none;
    font-family: var(--sub-header-font);
    font-size: 1.25rem;
    font-weight: 600;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    text-shadow:
        -1px -1px 0 var(--light-2),
        1px -1px 0 var(--light-2),
        -1px 1px 0 var(--light-2),
        1px 1px 0 var(--light-2);
}

.special-home-menu .menu-item a:hover {
    color: var(--light-1);
    background-color: var(--dark-1);
    border-left-color: var(--light-1);
    padding-left: 1.25rem;
    text-shadow: none;
}

.special-home-menu .menu-item.active a {
    color: var(--dark-2);
    background-color: var(--light-2);
    border-left-color: var(--dark-1);
    font-weight: 600;
}

ul:is(.search-results, .pagination) {
    padding: 0;
}
ul.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}
ul:is(.search-results, .pagination) li {
    list-style-type: none;
    a > i {
        margin-right: 0.5rem;
    }
}
.pagination {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.pagination a {
    display: inline-block;
    font-weight: 900;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    color: var(--dark-1);
    border: 1px solid var(--dark-1);
    background-color: var(--light-1);
    box-shadow: 2px 2px 5px #888888;
    text-decoration: none;
}
.pagination a.active {
    /* reverse the background-color and the color from the above */
    color: var(--light-1);
    background-color: var(--dark-1);
}

.special-message-wrapper p {
    color: red;
    font-size: 1.6rem;
    text-wrap-style: balance;
    text-align: center;
}