/* ARSOF History CSS styles ::  911-20th page*/

:root {
    --arsof-serif: 'Georgia', 'Palatino', 'Palatino Linotype', serif;
    --arsof-sans: 'Bahnschrift', 'Helvetica Neue', 'Arial', sans-serif;
    --arsof-sans-plain: 'Arial', sans-serif;
}


/* _____________ GENERAL __________________________________________*/
body {
    background: var(--arsof-black);
}
.container  {
    color: var(--arsof-white);
}



/* _____________ Header __________________________________________*/
.sept11-headline-group {
    color: var(--arsof-white);
    text-align: center;
    font-family: var(--arsof-sans, sans-serif);
    font-stretch: condensed;
    background: none;
    width: 100%;
    margin: 0;
}
.sept11-headline {
    color: #D62123;
    font-size: clamp(4rem, 5vw, 6rem);
    margin: -20px 0 20px;
    padding: 0;
    text-transform: uppercase;
}
.sept11-subheadline, .sept11-headline-group p {
    font-size: clamp(1.875rem, 6vw, 3rem);
}
.sept11-headline-group p {
    padding: 0;
}
.sept11-headline-group p img {
    opacity: 0.5;
    width: 50%;
    max-width: 400px;
}
.sept11-mlogo {
    width: 100%;
}
.sept11-intro {
    width: 100%;
}



/* _____________ sections __________________________________________*/
.sept11-miniheads {
    color: #D62123;
    font-family: var(--arsof-sans, sans-serif);
    font-size: clamp(0.875rem, 5vw, 2rem);
    font-weight: 300;
    text-transform: uppercase;
    border-bottom: 1px solid #D62123;
    margin: 60px 0 20px;
    padding-left: 1rem;
}
.sept11-paragraphs {
    font-family: var(--arsof-serif, serif);
    margin-bottom: 20px;
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    line-height: 1.75;
}
.arsof-video-group,
.arsof-article-group,
.arsof-photo-group {
  margin: 0 0 2rem;
}
.arsof-video-group figcaption,
.arsof-article-group figcaption {
    font-family: var(--arsof-sans-plain, sans-serif);
    padding: 0;
}
.arsof-video-group figcaption:first-of-type,
.arsof-article-group figcaption:first-of-type {
    font-weight: bold;
    font-size: 1.25rem;
    padding: .25rem 0 0;
    margin: 0;
}
.arsof-video-group figcaption:last-of-type,
.arsof-article-group figcaption:last-of-type {
    padding-top: 0;
    font-size: 1rem;
}
.arsof-article-group img {
    border: 2px solid var(--arsof-black);
    margin: 0;
}
.arsof-article-group:hover img,
.arsof-article-group:focus img {
    border: 2px solid var(--arsof-red);
}
.sept11-photos {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}
.sept11-photos figure {
    width: 31%;
    margin-right: 2%;
}

.sept11-signoff {
    text-align: left;
}
.sept11-signoff img {
    margin: 80px 0 120px;
    opacity: 0.75;
}
.sept11-body {
    background: url('../images/footer_600.jpg') #000 no-repeat bottom right /100%;
    padding-bottom: 400px;
}



/* _____________ remarks __________________________________________*/
.sept11-remarks {
    margin-bottom: 50px;
}

.sept11-remarks blockquote {
    font-family: var(--arsof-serif, serif);
    font-style: italic;
    font-size: 2rem;
    margin: 0 0 1rem;
}
.sept11-remarks-link {
    color: #D62123;
    border: 2px solid #D62123;
    font-size: 1rem;
    line-height: 1;
    padding: 0.7rem 1.25rem;
    border-radius: 10px;
    display: inline-block;
    margin-top: 0.5rem;
}
.sept11-remarks-link:hover,
.sept11-remarks-link:focus {
    background-color: #D62123;
    color: var(--arsof-white);
    text-decoration: none;
}
.sept11-letter {
    background-color: #f5f5f5;
    color: #393939;
    padding: 20px 30px;
    margin: 50px 0;
}
.sept11-email {
    font-family: var(--arsof-sans-serif, sans-serif);
    margin-bottom: 20px;
    font-size: 1.125rem;
    line-height: 1.5;
}





/* _____________ RESPONSIVE CSS __________________________________________*/

@media (min-width: 768px) {
    .sept11-body {background: url('../images/footer_1400.jpg') #000 no-repeat bottom right /100%;}
} /* ----- end 768 ---*/


@media (min-width: 992px) {
    .sept11-headline-group {background: url('../images/background_desktop_992.jpg') no-repeat top left /contain;}
    .sept11-mlogo {display: none;}
    .sept11-headline-group p {padding: 40px 0 2px;}
    .sept11-photos figure {width: 23%;}

} /* ----- end 992 ---*/


@media (min-width: 1140px) {
    .sept11-headline-group {background: url('../images/background_desktop_1650.jpg') no-repeat top left /contain;}
} /* ----- end 1140 ---*/


@media (min-width: 2000px) {
    .sept11-body {background: url('../images/footer_2500.jpg') #000 no-repeat bottom right /100%;}
} /* ----- end 2000 ---*/