@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');


@font-face {
     font-family: 'American Typewriter';
     font-style: normal;
     font-weight: 400;
     src: url(/fonts/american-typewriter.woff') format('woff'),
          url('/fonts/american-typewriter.woff2') format('woff2');
}

@font-face {
     font-family: 'American Typewriter';
     font-style: normal;
     font-weight: 700;
     src: url('/fonts/american-typewriter-bold.woff') format('woff'),
          url('/fonts/american-typewriter-bold.woff2') format('woff2');
}

.font-muli {
     font-family: "muli", sans-serif;
}

html {
     margin: 0px;
     padding: 0px;
     scroll-padding-top: 50px;
}

body {
     font-family: Helvetica, Roboto, sans-serif;
     font-style: normal;
     font-weight: 400;
     margin: 10px;
     font-size: 1.2rem;
     /*     This below determines the spacing between lines throughout the whole document*/
     line-height: 1.3rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     font-family: Lora, serif;
     font-weight: 600;
}

h1 {
     font-size: 2.6rem;
}

h2 {
     font-size: 2.4rem;
}

h3 {
     font-size: 2.2rem;
}

h4 {
     font-size: 2rem;
}

h5,
h6 {
     font-size: 1.8rem;
}

@media (max-width: 720px) {
     h1 {
          font-size: 2.1rem;
     }

     h2 {
          font-size: 1.9rem;
     }

     h3 {
          font-size: 1.6rem;
     }

     h4 {
          font-size: 1.4rem;
     }

     body {
          font-size: 1.1rem;
     }
}

a {
     text-decoration: none;
}

@media (min-width: 1200px) {

     .container,
     .container-lg,
     .container-md,
     .container-sm,
     .container-xl {
          max-width: 1400px;
     }
}

.half-line {
     line-height: .5em;
}

.am-type {
     font-family: "American Typewriter", serif;
}

.special-elite {
     font-family: "Special Elite", serif;
}

header+* {
     padding-top: 8rem;
     padding-top: 8rem;
}

blockquote {
     padding-left: 1rem;
     padding-top: 1rem;
     padding-bottom: 1rem;
     border-left: 5px solid blue;
     margin: 0.25rem 0;
}

blockquote.red {
     border-color: #B52B1A;
}

/* This one is centered, the one below is not. */
.home-tagline,
.bordered-text {
     /* background-color: #E19846; */
     margin: auto;
     width: fit-content;
     padding: 1rem;
     border-radius: 1rem;
     border: 1px solid #000;
     font-family: Lora, serif;
}

.home-tagline>*,
.bordered-text>* {
     color: #000000;
     text-align: center;
     font-size: 2.2rem;
}

.home-tagline,
.bordered-text-no-center {
     /* background-color: #E19846; */
     width: 300px;
     padding: 1rem;
     border-radius: 1rem;
     border: 1px solid #000;
     font-family: Lora, serif;
}

.page-background {
     background-color: #F2F2F2;
}

figure:not(.trinitas-sidebar) {
     text-align: center;
     font-size: 1.1em;
     text-indent: 0;
     margin: 0.5em;
     padding-bottom: 1.25rem;
     border-radius: 10px;
     border: 1px transparent #fff;
}

.half-width {
     width: 50%;
}

@media only screen and (max-width: 576px) {
     .half-width {
          width: 100%;
     }
}

figure.float-right {
     display: flex;
     flex-direction: row-reverse;
     align-items: center;
     justify-content: center;
}

figure.float-left {
     display: flex;
     align-items: center;
     justify-content: center;
}

figure.float-right img {
     padding: 10px;
}

@media only screen and (max-width: 992px) {
     figure.float-right {
          flex-direction: column-reverse;
     }

     figure.float-right img {
          width: 100%;
     }
}

.shadow {
     box-shadow: 0 0 0.75em 0 rgba(91, 91, 91, 0.25);
}

.trinitas-home {
     height: 220px;
}


.timeline > .row > div {
     margin-bottom: 1rem;
}

.timeline > .row > div > p {
     margin-bottom: 0;
}

.timeline-date {
     font-weight: bold;
}

.comments>li,
h3.comments {
     font-family: "Georgia";
}

@media only screen and (max-width: 600px) {
     width: 100%;
}

figure.shadow {
     background-color: #fff;
}

figure.shadow a,
figure.shadow a:hover {
     color: var(--bs-body-color);
}

figure.shadow figcaption {
     font-size: 1.1em;
     padding-top: 1.25rem;
}

.highlight-text {
     background-color: yellow;
}

.highlight-text-wrapper {
     padding: 10px;
     border: 1px solid #333;
     display: inline-block;
}

figcaption {
     word-break: break-all;
     /* this is so long URLs in figcaptions don't break funny */
}

figure:not(.half-width)>img {
     width: auto;
     max-width: 100%;
}

/*
img.scaled {
width: 100%;
}*/
.background-image {
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     padding: 7vh 1vw 38vh;
}

.background-image>h1 {
     color: white;
     text-align: center;
     text-shadow: 1px 1px 15px #000;
}


figcaption.smalltext {
     font-size: 10pt;
}

.crop {
     height: 220px;
     overflow: hidden;
}

.crop img {
     height: 100%;
     width: 100%;
     object-fit: cover;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
}

.index-img-text {
     font-size: 1.1em;
}

header,
nav,
article,
p,
ul,
footer {
     display: block
}

.header-wrapper {
     display: flex;
     align-items: center;
     justify-content: space-between;
}

header {
     height: 80px;
     /*	background-image: url("../img/blue-2906525_1920.jpg");*/
     display: flex;
         /* box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.15); */
     box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
     margin: -10px -10px 0;
     background-color: #e4a258; /* lighter tan shade */
}

.logo-site-name {
     padding: 0.75rem 0.25rem 0.75rem 0.75rem;
     display: flex;
     align-items: center;
     color: #000;
}

.nav-link {
     .4rem .75rem;
}

.header-logo {
     max-width: 90px;
     margin-bottom: -35px;
     /* comment this line out if the overhang is not desired */
     transition: all 0.5s ease;
}

@media only screen and (max-width: 992px) {
     .header-logo {
          max-width: 70px;
          margin-bottom: 0;
     }
}

td,
th {
     vertical-align: top;
}

.typewriter {
     font-family: "American Typewriter", Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}

@media only screen and (min-width: 768px) {
     .trinitas-title-wrapper {
          padding-right: 25%;
     }
}

@media only screen and (max-width: 768px) {
     .trinitas-title {
          font-size: 2em;
     }
}

.title {
     font-family: "American Typewriter", Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
     letter-spacing: .5px;
     word-spacing: 5px;
     margin: 0 0.75rem;
     white-space: nowrap;
     font-size: 1.7rem;
}

@media screen and (max-width: 1375px) {
     .title {
          font-size: 1.5rem;
     }
}

@media only screen and (max-width: 768px) {
     .title {
          font-size: 1.2rem;
          word-spacing: normal;
     }
}

.header-columns {
     align-items: center;
}

.resources {
     display: flex;
     justify-content: flex-end;
     font-size: 15px;
     letter-spacing: .1px;
     word-spacing: .5px;
     padding-top: 15px;
     font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"
}

.big-picture {
     border: 1px solid #333;
     border-radius: 10px;
     padding: 1rem 1.1rem 0.1rem;
     margin: 1rem 1% 1rem 8.33%;
}

.menuicon div {
     width: 35px;
     height: 5px;
     background-color: black;
     margin: 6px 0;
}

@media only screen and (max-width: 992px) {
     .desktop-menu {
          display: none;
     }
}

@media only screen and (min-width: 992px) {
     .mobile-menu {
          display: none;
     }
}

.highlight-text-wrapper input[type="button"] {
     white-space: normal;
}

.navbar {
     display: flex;
     font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
     margin: 0;
     justify-content: space-between;
     width: 100%;
     padding: 0;
}

@media screen and (max-width: 992px) {
     .navbar-collapse {
          background-color: #fff;
     }

     ul.nav-tabs {
          flex-direction: column;
     }

     .dropdown-menu {
          position: relative;
     }

     .collapse.show {
          box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     }

     header {
          height: auto;
     }
}

@media screen and (min-width: 992px) {
     .navbar-collapse {
          flex-basis: auto;
          justify-content: flex-end;
     }
}



.trinitas-menu-wrapper {
     background-color: #D4E6F1;
     margin: -12px -10px 0;
}

.trinitas-menu .navbar {
     font-family: "American Typewriter";
     justify-content: space-between;
     font-size: 1.2em;
     max-width: 1000px;
     margin: auto;
     padding: 1rem 0;
}

.image-background {
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
     color: #220606;
     text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.5);
     padding: 0 1rem 2rem;
}

.desert-cross1 {
     background-image: url("../img/website-header-2024.jpeg");
     background-position-x: 75%;
     padding: 2rem 2rem 20rem;
     text-shadow: 2px 2px 20px rgba(255, 255, 255, 0.5);
     clip-path: url('/img/wave-path.svg#wave-clip');
     /* margin-bottom: 3rem; */
}

.desert-cross2 {
     background-image: url("../img/website-header-2024.jpeg");
     background-position-x: 75%;
     padding: 2rem 2rem 20rem;
     text-shadow: 2px 2px 20px rgba(255, 255, 255, 0.5);
     /* margin-bottom: 3rem; */
}
@media screen and (max-width: 1024px) {
     .desert-cross h1 {
          font-size: 2.3rem;
     }
}

.hometop-background {
     background-image: url("../img/burlap.jpg");
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
     margin-left: -24px;
     margin-right: -12px;
     color: #fff;
     text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.5);
     padding: 2rem 12px 2rem 24px;
}

.navbar>a,
.navbar>div {
     align-self: center;
}

.navbar button {
     font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
}

.navbar .desktop-menu a {
     text-decoration: none;
     color: black;
     padding: 6px 14px;
     font-size: 0.9em;
}

.navbar .highlight {
     /*text-transform: uppercase;*/
     white-space: nowrap;
}

.navbar .highlight:hover {
     background-color: #76A4E3;
     color: white;
}

/* Dropdown Button */
.dropbtn {
     background-color: transparent;
     font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
     color: black;
     padding: 6px 14px;
     font-size: 0.9em;
     border: none;
     outline: none;
     display: flex;
     flex-direction: row;
     align-items: center;
     margin-right: 6px;
}

.dropbtn::after {
     content: "";
     height: 14px;
     width: 14px;
     right: 0;
     background-image: url(/svg/down-arrow.svg);
     background-repeat: no-repeat;
     background-position: right;
     margin-left: 6px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
     position: relative;
     display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
     display: none;
     position: absolute;
     background-color: #f9f9f9;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
     color: black;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
     background-color: #f1f1f1;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
     display: block;
}

.video-embed {
     position: relative;
     padding-bottom: 56.25%;
     padding-top: 30px;
     margin-bottom: 1rem;
     height: 0;
     overflow: hidden;
}

.video-embed.short {
     padding-bottom: 100%;
     padding-top: 77%;
}

.video-embed iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

.hover1:hover {
     background-color: lightgray;
}

.icons {
     float: left;
}

.center {
     text-align: center;
}

.u, .underline {
     text-decoration: underline;
}

.article {
     margin: 0 25px;
}

@media screen and (min-width: 768px) {
     .article-padding {
          padding: 0 50px;
     }
}


hr {
     border-top: 1px solid #333;
}

.container1 {
     padding-right: 1px;
     padding-left: 1px;
     margin-right: auto;
     margin-left: auto;
}

.sidebar-border,
.sidebar {
     border-left: 1px solid #333;
     margin-left: 0.5rem;
}

.sidebar-box,
.rounded-box {
     border: solid 1px #333;
     padding: 10px;
     border-radius: 3px;
}

figure.trinitas-sidebar {
     text-align: left;
}

figure.trinitas-sidebar:not(:last-child) {
     padding-bottom: 10px;
     padding-top: 10px;
     border-bottom: 1px solid #0D9A21;
}

@media only screen and (min-width: 1008px) {
     .trinitas-sidebar-column {
          border-left: 1px solid #0D9A21;
          padding-left: 10px;

     }
}

figure.trinitas-sidebar figcaption {
     word-break: normal;
}

.bubbletimeline h2 {
     font-family: "American Typewriter Light", Cambria, "Hoefler Text", Constantia;
}

.bubbletimeline li a {
     color: white;
     text-decoration: none;
}

.bubbletest {
     width: 35px;
     height: 5px;
     background-color: black;
     margin: 6px 0;
}

.bubbletimeline ul {
     list-style: none;
     padding: 0;
     align-items: center;
     align-content: center;
     justify-content: center;
     display: flex;
     flex-wrap: wrap;
}

.bubbletimeline li {
     height: 30px;
     width: 100px;
     min-width: 50px;
     margin: 5px;
     align-items: center;
     align-content: center;
     justify-content: center;
     display: flex;
     flex-wrap: wrap;
     background-color: #1D9FE3;
     border-radius: 20px;
}

.bubbletimeline1 h1 {
     font-family: "American Typewriter Light", Cambria, "Hoefler Text", Constantia;
}

.bubbletimeline1 a {
     color: white;
     text-decoration: none;
}

.bubbletimeline1 ul {
     list-style: none;
     padding: 0;
     align-items: center;
     align-content: center;
     justify-content: center;
     display: flex;
     flex-wrap: wrap;
}

.bubbletimeline1 li {
     height: 30px;
     width: 100px;
     min-width: 50px;
     margin: 5px;
     align-items: center;
     align-content: center;
     justify-content: center;
     display: flex;
     flex-wrap: wrap;
     background-color: #1D9FE3;
     border-radius: 20px;
}

.bubbletimeline2 h1 {
     font-family: "American Typewriter Light", Cambria, "Hoefler Text", Constantia;
}

.bubbletimeline2 a {
     color: white;
     text-decoration: none;
}

.bubbletimeline2 ul {
     list-style: none;
     padding: 0;
     align-items: center;
     align-content: center;
     justify-content: center;
     display: flex;
     flex-wrap: wrap;
}

.bubbletimeline2 li {
     height: 30px;
     width: 240px;
     min-width: 50px;
     margin: 5px;
     align-items: center;
     align-content: center;
     justify-content: center;
     display: flex;
     flex-wrap: wrap;
     background-color: #1D9FE3;
     border-radius: 20px;
}

.bubblesinglerow {
     height: 30px;
     width: 100px;
     min-width: 50px;
     margin: 5px;
     align-items: center;
     align-content: center;
     justify-content: center;
     background-color: #1D9FE3;
     border-radius: 20px;
}

/* Make all li items within a ul a checkmark instead of a bullet point */
ul.checkmark>li {
     list-style-image: url('/svg/checkmark.svg');
}

ul.checkmark-blue>li {
     list-style-image: url('/svg/checkmark-blue.svg');
}

/* Individually change the color of li checkmarks without affecting the whole ul list */
ul.checkmark>li.checkmark-blue {
     list-style-image: url('/svg/checkmark-blue.svg');
}

li.checkmark-blue {
     list-style-image: url('/svg/checkmark-blue.svg');
}

/* Tooltip containers narrow (1) and wide (2) */
.tooltip {
     position: relative;
     display: inline-flex;
     max-width: 300px;
     opacity: initial;
     font-family: inherit;
     font-size: 16px;
     z-index: initial;
     /* to put a dotted black line under the question */
     /*border-bottom: 1px dotted black; */
}

.home-page-items .tooltip {
     max-width: 350px;
}

/* Tooltip text */
.tooltip .tooltiptext {
     visibility: hidden;
     background-color: blue;
     color: #fff;
     text-align: center;
     padding: 10px;
     border-radius: 6px;
     margin-left: 0.25rem;
     position: absolute;
     width: 200px;
}

.tooltiptext {
     z-index: 10;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
     visibility: visible;
}

@media screen and (max-width: 768px) {
     .home.tooltiptext {
          display: none;
     }
}

.tooltiptext.short {
     width: 60px;
     left: initial;
     margin-left: initial;
}

/* Overrides for home page items */
.tooltip .home.tooltiptext {
     top: 0;
     left: 0;
     margin-left: 0;
     background-color: #1B5E20;
     font-size: 1.05rem;
     width: auto;
     position: absolute;
}

/* Hover for iphone */
#controls li {
     display: block;
}

#controls li .link {
     display: block;
     padding: 10px;
     border-bottom: solid 1px #CCC;
}

#controls li .hover_controls {
     /*float: right;*/
     display: none;
}

#controls li:hover .hover_controls {
     display: block;
}

.nt-canonization-chart {
     width: 100%;
}

.chtimeline {
     margin: 0 25px;
}

.ch-timeline td:first-child {
     width: 50px;
     font-weight: bold;
}

.ch-table td {
     padding-bottom: 15px;

}

/*  the following down to .center-big are for arranging the timelines according to floating.  */
.timeline-article {
     margin: auto;
     width: 95%;
}

.timeline-article td {
     padding-right: 10 px;
}

.timeline-entry {
     float: left;
     margin-bottom: 10px;
     width: 100%;
}

.date {
     float: left;
     width: 75px;
}

.timeline-content {
     float: left;
     width: calc(100% - 75px);
}

.timeline-content p {
     margin-top: 0;
}

.timeline-content li {
     margin-bottom: 10px;
}

/*  the above are for arranging timelines according to floating */

#faq-accordion .accordion-header,
#classes-accordion .accordion-header {
     font-family: "American Typewriter";
}

.accordion-button {
     font-size: 1.1rem;
     letter-spacing: 0.05rem;
}

/* Space after 'the big picture' */
.accordion-button>*:first-child:not(last-child) {
     margin-right: 1.5rem;
}

@media screen and (max-width: 576px) {
     .accordion-button {
          flex-direction: column;
          align-items: baseline;
     }

     .accordion-button>*:first-child:not(last-child) {
          margin-right: 0;
          margin-bottom: 0.5rem;
     }
}

.li-double-spaced li {
     margin-bottom: 1rem;
}

.center-big {
     padding-top: 15px;
     padding-bottom: 15px;
}

.canon-table {
     width: 100%;
     border: 1px solid black;
     border-collapse: collapse;
}

.canon-table th {
     text-align: left;
     padding-left: 10px;
}

.canon-table th,
.canon-table td {
     border: 1px solid black;
     width: 25%
}

.canon-table ul {
     padding-left: 10px;
}

.canon-table li {
     list-style-type: none;
}

.font-comments>ul>li {
     font-family: Roboto, sans-serif;
}

.collapsible {
     background-color: #fff;
     color: #000;
     cursor: pointer;
     padding: 18px;
     width: 100%;
     border: 1px solid #333;
     border-radius 3px;
     text-align: left;
     outline: none;
     font-size: 15px;
}

.active,
.collapsible:hover {
     background-color: #f8f8f8;
}

.collapsible-content {
     padding: 0 18px;
     display: none;
     overflow: hidden;
     background-color: #f1f1f1;
}

.collapsible:after {
     content: '\02795';
     /* Unicode character for "plus" sign (+) */
     font-size: 13px;
     color: #000;
     float: right;
     margin-left: 5px;
}

.active:after:not(.nav-link) {
     content: "\2796";
     /* Unicode character for "minus" sign (-) */
}



.articles-list h1 {
     margin-top: 1rem;
}

.articles-list ol {
     list-style: none;
     padding: 0;
}

.articles-list ol li {
     background-color: #fff;
     padding: 1rem;
     border-radius: 1rem;
     border: 1px solid #000;
     font-family: Lora, serif;
     margin-bottom: 0.25rem;
     font-size: 1.2rem;
}

.articles-list ol li a {
     color: #000;
}

.articles-list ol li:before {
     counter-increment: articlescounter;
     content: counter(articlescounter) ". ";
}

.articles-list ol:first-of-type {
     counter-reset: articlescounter;
}

footer {
     float: left;
     width: 100%
}

.footer-background {
     background-color: #E19846;
     padding: 2rem;
}

.home-page-items {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     grid-gap: 3rem;
     margin-bottom: 2rem;
}


.home-page-item {
     display: block;
     background-color: #E19846;
     box-shadow: 0 0 0.75em 0 rgba(91, 91, 91, 0.25);
     border-radius: 10px;
     transition: ease-in-out all 200ms;
     height: 100%;
}

.home-page-item:hover,
.home-page-item:focus {
     background-color: #E19B46;
     transition: ease-in-out all 200ms;
}


.home-page-image {
     border-radius: 10px 10px 0 0;
     height: fit-content;
     margin-bottom: 1rem;
}

.home-page-teaser {
     padding: 0.25rem 1rem 1rem;
}

.home-page-teaser h3 {
     color: #222;
}

.home-page-teaser h4 {
     font-size: 1.4rem;
     text-align: center;
     color: #E19B46;
     font-weight: bold;
}

a:hover .home-page-teaser h4,
a:focus .home-page-teaser h4 {
     color: #222;
}

.home-page-teaser h5 {
     font-size: 1.2rem;
     text-align: center;
     color: #eee;
}

a:hover .home-page-teaser h5,
a:focus .home-page-teaser h5 {
     color: #fff;
}

.home-page-image img {
     height: 16rem;
     width: 100%;
     object-fit: cover;
     border-radius: 10px 10px 0 0;
}

.home-page-teaser p {
     font-size: 1.1em;
}

@media screen and (max-width: 768px) {
     .home-page-item {
          grid-auto-flow: row;
          grid-template-columns: 1fr;
     }

     .home-page-image {
          margin-bottom: 1rem;
          margin-right: 0;
     }
}

.sidebar {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 1rem 0.5rem 0;
}

.sidebar>* {
     text-align: center;
}

.sidebar .btn {
     margin-bottom: 0.5rem;
}

.sidebar-image {
     height: auto;
     width: 100%;
     margin: 1rem auto;
     box-shadow: 0 0 0.75em 0 rgba(91, 91, 91, 0.25);
     /*max-width:  7rem    **This made the image smaller*/
}

.sidebar-book {
     display: flex;
     align-items: center;
}

.sidebar-book p {
     margin-top: 1rem;
     margin-left: 0.75rem;
     text-align: left;
}

@media (min-width: 576px) and (max-width: 1200px) {
     .sidebar-book img {
          max-width: 400px;
     }
}

.sidebar-group {
     border-bottom: 1px solid #333;
     padding-bottom: 1rem;
}

.sidebar-group:not(:first-of-type) {
     margin-top: 1rem;
}

hr {
     opacity: 1;
}

.outer-bordered-text {
     display: flex;
     justify-content: center;
     padding: 1rem;
     border: 1px solid black;
     padding: 1rem;
     border-radius: 1rem;
     line-height: 1em;
     width: fit-content;
     margin: auto;
}

.timeline-wrapper {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
     border-top: 3px solid #333;
     grid-gap: 2rem;
     z-index: 1;
}

.timeline-item {
     margin-top: -20px;
     z-index: 2;
}

.timeline-item.s1 {
     grid-column: span 1;
}

.timeline-item.s2 {
     grid-column: span 2;
}

.timeline-item.s3 {
     grid-column: span 3;
}

.timeline-item.s4 {
     grid-column: span 4;
}

.timeline-item.s5 {
     grid-column: span 5;
}

.timeline-item.s6 {
     grid-column: span 6;
}

.timeline-item.s7 {
     grid-column: span 7;
}

.timeline-item.s8 {
     grid-column: span 8;
}

.timeline-item.s9 {
     grid-column: span 9;
}

.timeline-item.s10 {
     grid-column: span 10;
}

.timeline-item::before {
     font-size: 2rem;
     content: "\2756";
     z-index: 3;
}

header {
     transition: all 0.5s ease;
     position: fixed;
     z-index: 999;
     width: 100%;
}

header.fixed {
     height: 50px;
     position: fixed;
     width: 100%;
     z-index: 999;
     transition: all 0.5s ease;
     background-color: #fff;
}

header.fixed .logo-site-name {
     padding: 0;
}

header.fixed .header-logo {
     margin: 0;
     max-width: 35px;
}

#quizForm label {
     margin: 0.5rem;
}

#quizForm input {
     margin-right: 0.5rem;
}


form.inline-form {
     display: inline-block;
     float: right;
     border: 1px solid #000;
     padding: 1rem;
     border-radius: 20px;
     width: 17rem;
     margin: 0 1rem;
}

.mailchimp-signup {
     border: 1px solid #333;
     border-radius: 5px;
     margin: 1rem 0;
}

/* Bootstrap Menu CSS */
.nav-link {
     color: #000;
     font-size: 1.15rem;
}

.nav-tabs {
     border-bottom: none;
}

.dropdown-menu {
     transition: opacity 0.25s ease-in-out;
}

.nav-tabs .dropdown-menu {
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 20px;
}

.dropdown:hover .dropdown-menu {
     display: block;
}

/*  I am keeping this because it shows how to make colors change to other colors
footer {
float:left;
width:100%;
padding-left:10px;
box-sizing:border-box;
background-color: aquamarine;
background: aquamarine; For browsers that do not support gradients 
  background: -webkit-linear-gradient(aquamarine, chartreuse); For Safari 5.1 to 6.0 
  background: -o-linear-gradient(aquamarine, chartreuse); For Opera 11.1 to 12.0 
  background: -moz-linear-gradient(aquamarine, chartreuse); For Firefox 3.6 to 15 
  background: linear-gradient(aquamarine, chartreuse); Standard syntax (must be last) 
}
*/

/* Card Flip styles */
.inline-cards {
     display: flex;
}

.card {
     margin: 1rem;
     padding: 1rem;
     border-width: 3px;
}

input[type='checkbox'] {
     display: none;
}

/* Flip Cards CSS */
.card-container {
     display: grid;
     perspective: 700px;
}

.card-flip {
     display: grid;
     grid-template: 1fr / 1fr;
     grid-template-areas: "frontAndBack";
     transform-style: preserve-3d;
     transition: all 0.7s ease;
}

.card-flip div {
     backface-visibility: hidden;
     transform-style: preserve-3d;
}

.front {
     grid-area: frontAndBack;
     border-color: #DE8D3E;
}

.back {
     grid-area: frontAndBack;
     transform: rotateY(-180deg);
     border-color: green;
}

input[type='checkbox']:checked+.card-container .card-flip {
     transform: rotateY(180deg);
}

.gsc-control-cse {
     padding: 0.2rem 0 0 1rem !important;
     max-width: 300px;
}

/* make the search bar shorter */
.gsib_b {
     height: 24px!important;
}

.gsc-results-wrapper-overlay {
     background-color: #fff!important;
}

/* make the search bar background white when in fixed */
.fixed .gsc-control-cse {
     background-color: #fff!important;
     border-color: #fff;
}

.answer {
     background-color: #f0f0f0;
     padding: 2.5rem;
     cursor: pointer;
}

.answer::before {
     content: "Click to see answer";
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     padding: 1rem;
     pointer-events: none;
     font-style: italic;
}

.answer.show::before {
     display: none;
}

.answer li {
     visibility: hidden;
     display: block;
     transition: all 250ms ease-in-out;
}

.answer.show li {
     visibility: visible;
     transition: all 250ms ease-in-out;
}

.nt-timeline table tr {
     border-bottom: 1px solid #939799;
}

.spaced-bullet-points li {
     padding-bottom: 10px;
}

/* Add padding to left of contact form on desktop */
@media screen and (min-width: 992px) {
     .contact-wrapper {
          padding-left: 2rem;
     }
}

/* Add padding on top of contact form on mobile */
@media screen and (max-width: 992px) {
     .contact-wrapper {
          padding-top: 2rem;
     }
}

.contact-wrapper .form-group {
     margin-bottom: 1rem;
}

.contact-wrapper label {
     margin-bottom: 0.25rem;
}

.table-fade-in {
     display: grid;
     margin: auto;
     max-width: 600px;
}

.table-fade-in .table-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0.5rem;
     opacity: 0;
     transform: translateY(20px) scale(0.95);
     transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.table-fade-in .table-row:not(:last-child) {
     border-bottom: 1px solid #eee;
}

.table-fade-in .table-row > div {
     padding: 1rem;
}

.table-fade-in .table-row > div:not(:last-child) {
     border-right: 1px solid #E19846;
}

.table-fade-in .table-row.show {
     opacity: 1;
     transform: translateY(0) scale(1);
}

.table-fade-in .table-row.header {
     font-weight: bold;
     font-size: 1.2rem;
     text-align: center;
     border-bottom: none;
     grid-template-columns: 1fr;
}

@media (max-width: 992px) {
     .medium-order-1 {
          order: 1;
     }
}

@media (max-width: 992px) {
     .medium-order-2 {
          order: 2;
     }
}


@media (max-width: 992px) {
     .medium-order-3 {
          order: 3;
     }
}


.dropdown-toggle:hover::after {
     border-top: 0;
     border-bottom: .3em solid;
}

@media screen and (min-width: 992px) {
     #apocrypha-contents ol {
          column-count: 3;
     }
     #apocrypha-contents ol li {
          break-inside: avoid;
          page-break-inside: avoid;
          -webkit-column-break-inside: avoid;
     }
}