/* /*  My Custom Styles  */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
img {
	display: block;
	max-width: 100%;
}
ul, ol {
	list-style-type: none;
	margin-bottom: 1rem;
}
/*  custom properties
-----------------------------------------------------------------------  */
:root {
	--ff-primary: "Raleway", sans-serif;
	--ff-secondary: "Merienda", "comic sans ms", sans-serif;

	--fw-reg: 400;
	--fw-bold: 500;
	--fw-header: normal;

	--clr-light: #fff;
	--clr-dark: #303030;
	--clr-accent: #16e0bd;
	--clr-background: #DBCA60;
	--clr-dropdowns: #ffe699;
	--clr-link: #8B4513;
	--clr-linkvisited: #004d00;

	--clr-red: #e60000;
	--clr-green: hsl(120, 100%, 15%);
	--clr-blue: blue;
	--clr-black: black;
	--clr-cocobrown: #7E3817;
	--clr-darkbrown: #432109;

	--fs-h1: 2rem;
	--fs-h2: 1.5rem;
	--fs-h3: 1.25rem;
	--fs-body: 1rem;
	--fs-italic: italic;
}

@media (min-width: 900px) {
	:root {
		--fs-h1: 3rem;
		--fs-h2: 2rem;
		--fs-h3: 1.5rem;
		--fs-body: 1.125rem;
	}
}

html {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

body {
	/* https://www.freecodecamp.org/news/html-page-width-height/ */
	min-height: 100vh;
	font-family: var(--ff-primary);
	font-size: var(--fs-body);
	line-height: 1.6rem;
	color: var(--clr-dark);
	/* ff 3.6+ */
	background:-moz-linear-gradient(92deg, rgba(255, 255, 0, 0.65) 0%, rgba(255, 255, 0, 0.23) 48%, rgba(78, 154, 6, 0.77) 99%);
	/* safari 5.1+,chrome 10+ */
	background:-webkit-linear-gradient(92deg, rgba(255, 255, 0, 0.65) 0%, rgba(255, 255, 0, 0.23) 48%, rgba(78, 154, 6, 0.77) 99%);
	/* opera 11.10+ */
	background:-o-linear-gradient(92deg, rgba(255, 255, 0, 0.65) 0%, rgba(255, 255, 0, 0.23) 48%, rgba(78, 154, 6, 0.77) 99%);
	/* ie 6-9 */
	/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4E9A06', endColorstr='#FFFF00', GradientType=1 ); */
	/* ie 10+ */
	background:-ms-linear-gradient(92deg, rgba(255, 255, 0, 0.65) 0%, rgba(255, 255, 0, 0.23) 48%, rgba(78, 154, 6, 0.77) 99%);
	/* global 94%+ browsers support */
	background:linear-gradient(92deg, rgba(255, 255, 0, 0.65) 0%, rgba(143, 143, 101, 0.23) 48%, rgba(78, 154, 6, 0.77) 99%);
	padding: 0;
	margin: 0;
}

.myWrapper {
	max-width: 1100px;
	margin: 0 auto;
}

/* typography
----------------------------------------------------------------------------- */
p {
	margin: 0 0 0.75rem 0;
}
h1, h2, h3, h4, h5, h6,
header {
	font-family: var(--ff-secondary);
	font-weight: var(--fw-header);
}
h1 {
	font-size: var(--fs-h1);
	line-height: 1.25em;
}
h2 {
	font-size: var(--fs-h2);
	line-height: 1.1;
	color: var(--clr-cocobrown);
	padding-top: 0.75rem;
	margin-bottom: 1rem;
}
h3 {
	max-width: 97%;
	line-height: 1.5;
	padding-top: 0.75rem;
	margin-bottom: 1rem;
}
h4 {
	color: var(--clr-green);
	padding-top: 0.75rem;
	margin-bottom: 1rem;
}
h5 {
	color: var(--clr-green);
	padding-top: 0.75rem;
	margin-bottom: 1rem;
}

/*  link styles
---------------------------------------------------------------------------- */
a:link {
	font-family: var(--ff-primary);
	color: #8B4513;
	text-decoration: none;
}
a:visited {
	color: #006600;
	color: #004d00;
	text-decoration: none;
}
a:focus {
	background-color: #FFFFCC; /* YELLOW */
	outline: none;
}
a:hover {
	color: var(--clr-green);
	background-color: #FFFFCC; /* YELLOW */
	text-decoration: underline;
	outline: none;
}
/*
a:active {
	color: black;
	background-color: #FFFFCC;
	outline: solid;
	outline-width: thin;
	border: none;
}
*/

/* general styles - utilities
---------------------------------------------------------------------------- */
sup {
	color: var(--clr-red);
	padding-left: .5rem;
	padding-right: .5rem;
}
div.scrB {
	margin-left: 4rem;
	margin-bottom: 1em;
}
div.transB {
	margin-left: 1rem;
}
section.content.kjv div.scrB {
	padding-top: 1rem;
	margin: 0 4rem 1rem 4rem;
}
.my-pl1 {
	padding-left: 1rem;
}
.my-pl2 {
	padding-left: 2rem;
}
.my-ml1 {
	margin-left: 1em;
}
.my-ml2 {
	margin-left: 2em;
}
.my-ml3 {
	margin-left: 3em;
}
.image-center {
	padding: 0.5rem 0;
	margin: 0 auto;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}
.text-italic {
	font-style: italic;
}
/* still used on notepages need to switch to new class */
.headline p {
	font-size: 1.75rem;
	line-height: 1.4em;
	color: var(--clr-darkbrown);
	font-weight: var(--fw-bold);
	text-align: center;
	max-width: 80%;
	padding-top: 2rem;
	margin: 0 auto 1.5rem auto;
}
.slogan {
	color: black;
}
hr.postHeader {
	font-weight: 700;
	width: 50%;
	margin-bottom: 1rem;
	box-shadow: 1px 1px 2px;
}
/* inline styles
------------------------------------ */
.angelI {
	color: var(--clr-blue);
	font-style: italic;
}
.beastNameGovernment {
	color: var(--clr-red);
	font-size: var(--fs-h3);
	font-family: var(--ff-secondary);
	text-align: center;
	margin: 0;
}
.beastNameMassMedia {
	color: purple;
	font-size: var(--fs-h3);
	font-family: var(--ff-secondary);
	text-align: center;
	margin: 0;
}
.beastNameMedical {
	color: blue;
	font-size: var(--fs-h3);
	font-family: var(--ff-secondary);
	text-align: center;
	margin: 0;
}
.beastNameMoney {
	color: green;
	font-size: var(--fs-h3);
	font-family: var(--ff-secondary);
	text-align: center;
	margin: 0;
}
.beastNameReligion {
	color: rgb(128, 77, 0);
	font-size: var(--fs-h3);
	font-family: var(--ff-secondary);
	text-align: center;
	margin: 0;
}

.falseI {
	color: indigo;
	font-style: italic;
}
.myComment {
/* 	font-family: var(--ff-secondary); */
	color: var(--clr-green);
	padding-top: .5em;
}
.noteI {
	color: var(--clr-green);
	font-size: 90%;
}
.prophetI {
	color: purple;
	font-style: italic;
}
.ruachI {
	color: var(--clr-blue);
	font-style: italic;
}
.YAHUSHUAI {
	color: var(--clr-red);
}
.YHWHI {
	color: var(--clr-red);
}

/* block styles
------------------------------------ */
.impB {
	color: var(--clr-green);
	margin-left: 3em;
	font-style:italic;
	font-size: 95%;
}
.noteB {
	color: var(--clr-green);
	padding-left: 1.5em;
	font-size: 95%;
}
.noteListItem p {
	font-family: var(--ff-primary);
	color: var(--clr-black);
	padding: .5em 2em 0 3em;
	margin: 0;
}
.ReadBook {
	color: var(--clr-green);
}

/* header 2022-0202
---------------------------------------------------------------------------- */
.header-container {
  max-width: 1200px;
	position: relative;
	display: flex;
	flex-flow: row wrap;
  justify-content: center;
	align-items: center;
  align-content: center;
  gap: 0.5rem;
	z-index: 1;
  padding-top: 1rem;
  margin: 0 auto 1rem auto;
}
.header-logo {
  max-width: 15%;
  min-width: 10%
}
.header-title {
  min-width: 60%;
}
.header-title h1 {
/* 	font-weight: 400;
	font-size: 2.2em; */
	text-align: center;
	margin: 0 0 .3em;
}
.header-title h2 {
/* 	font-weight: 400;
	font-size: 2em; */
	text-align: center;
	margin: 0 0 .4em;
}
.header-date {
  display: inline-block;
  min-width: 20%;
}

/* burger toggle
------------------------------------ */
.header-burger {
	position: absolute;
	top: 15px;
	right: 10px;
  cursor: pointer;
  padding-right: 0.5em;
}
.header-burger div {
  width: 25px;
  height: 3px;
  background-color: var(--clr-black);
  margin: 5px;
  transition: all 0.3s ease;
}
.navbar-toggle {
    cursor: pointer;
    font-size: 1.5em;
}
.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
    opacity: 0;
}
.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}
/* end burger toggle --------------- */
/* header menu
------------------------------------ */
.header-menu {
	max-width: 1200px;
	position: relative;
/* 	border: 1px solid rgb(100, 255, 11); */
	margin: 0 auto;
}
.header-menu {
	position: absolute;
	display: flex;
/* 	flex-flow: column nowrap; */
  flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
  column-gap: 2rem;
	top: 50px;
	left: 0;
	right: 0;
  opacity: 0;
/* 	background-color: #ffe699; */
	margin-left: auto;
	margin-right: auto;
	transition: all 0.5s ease;
}
a.nav-link {
	display: block;
	min-width: 150px;
	font-weight: var(--fw-bold);
	text-align: center;
	text-decoration: none;
	background-color: var(--clr-green);
	color: white;
	padding: .3em .5em;
	border: 1px solid #8B4513;
	border-radius: 12.5px;
	margin: .3em 0;
}
a.nav-link:hover {
	background-color: #ccffcc;
	color: var(--clr-dark);
	text-decoration: underline;
}
.showMenu {
	top: 120px;
  opacity: 1;
}
/* end header menu ----------------- */
/* end header -------------------------------------------------------------- */

/* begin page content
---------------------------------------------------------------------------- */
main.wrapper {
	max-width: 1200px;
	margin: 0 auto 1.5rem auto;
}
main {
	background-color: var(--clr-light);
	padding: 1rem 5%;
	border: 1px solid #855723;
	border-radius: 12.5px 12.5px;
}
/* page sizing
 section p {
	max-width: 80ch;
} */
section.content {
	position: relative;
}
section.content div.myComment p {
	margin-left: 1rem;
}
/* scroll button
------------------- */
.scroll-to-top {
	position: fixed;
	bottom: 0;
	right: 0.5rem;
	color: white;
	background: tan;
	padding: 0.5em 1em;
	border-radius: 2em;
	box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
}
a:link.scroll-to-top  {
	color: var(--clr-cocobrown);
}
a:visited.scroll-to-top  {
	color: white;
}
a:active.scroll-to-top  {
	color: white;
}
/*  */
button.scrollToTop {
	color: var(--clr-dark);
/* 	position: absolute; */
	position: fixed;
	bottom: 10px;
	right: 10px;
	background: tan;
	padding: 0.5rem 1rem;
	border-radius: 1rem;
}
button.scrollToTop:hover {
	background-color: #FFFFCC; /* YELLOW */
}
/* turn off scroll on home page */
main.home-page button.scrollToTop {
	display: none;
}
/* banner either 1 col or 2 col
---------------------------------------------------------------------------- */
.banner-1col h2 {
	font-family: var(--ff-primary);
	font-weight: var(--fw-reg);
	text-align: center;
	padding-top: 1rem;
	margin-bottom: 2rem;
}
figure.quote {
	max-width: 80%;
	margin: 0 auto 3rem auto;
}
figure.quote cite {
	float: right;
}
/* blockquote inside a figure element
------------------------------------- */
blockquote {
	background: rgba(197, 240, 197, 0.2);
	margin: 0;
}
blockquote p {
	padding: 1rem;
	border-radius: 1rem;
}
figcaption {
	padding-top: 0.5rem;
}
figcaption cite a:link {
	color: var(--clr-dark);
}
blockquote p::before {
	content: '\201C';
}
blockquote p::after {
	content: '\201D';
}
/* end blockquote ------------------- */

/* need to wrap the image and figure in a wrapper for flexbox */
/* Im phasing this out for the code below */
.banner-2col {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	justify-items: center;
	gap: 1rem;
	column-gap: 2rem;
	margin-bottom: 1rem;
}
.banner-2col h2 {
	width: 100%;
	text-align: center;
}
.banner-2col-image {
	flex-basis: 40%;
}
.banner-2col-image img {
	max-width: 250px;
	margin: 0 auto;
}
.banner-2col-quote {
	max-width: 500px;
	flex-basis: 60%;
}
/* new code 2022/0702 started with N_Prayer.php */
/* I need to move the h2 element in the header to the introduction
section otherwise it is not a section but a div */

.banner-FlexContainer {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	justify-items: center;
	gap: 1rem;
	column-gap: 2rem;
	margin-bottom: 6.25rem;
}
.banner-FlexItem-imageWrapper {
	flex-basis: 40%;
}
.banner img {
	max-width: 250px;
	margin: 0 auto;
}
.banner-FlexItem-quote {
	max-width: 500px;
	flex-basis: 60%;
}

/* end banner --------------------------------------------------------------- */
/* home page
	no introduction section on the home and SOP pages. ---------------------- */
.home.content.block-3col-flex {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	gap: 1rem;
	row-gap: 2rem;
	margin-bottom: 2rem;
}
.home-image-left img {
/*   width: 270px; */
	flex-basis: 15%;
}
.home-nav {
	min-width: 300px;
	flex-basis: 40%
}
.home-nav ul {
	text-align: center;
}
.home-nav ul li {
	margin: 0.75rem 0;
}
.home-image-right img {
/*   width: 270px; */
	max-width: 250px;
	flex-basis: 15%
}
/* home page content a unique setup
   maybe I can put my burger fix in
   this section as I don't need a
   burger on the home page ---------- */
section.SOP p {
	max-width: 80%;
	margin: 0 auto 1rem auto;
}
section.SOP ul {
	font-style: var(--fs-italic);
	font-weight: var(--fw-bold);
	max-width: 70%;
	padding: .75rem 0;
	margin: 0 auto;
}
section.SOP ul li {
	margin: 1rem 0 1rem 0;
}
/* end home and SOP page styles ---------------------------------------------------- */
/* introduction
---------------------------------------------------------------------------- */
section.intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  row-gap: 0.5rem;
	margin-bottom: 1rem;
}
.intro h2 {
  padding: 0.5rem 0;
  margin: 0;
}
.intro p {
  padding-left: 1rem;
}
.intro nav {
  max-width: 100%;
  padding-top: 0.5rem;
}
nav.mainindex ul li a {
	text-transform: uppercase;
}
/* alpha nav bar - IndexPages only
------------------------------------ */
.alphaNavBar {
	max-width: 90%;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem 0;
	margin: 0 auto;
}
.alphaNavBar a {
	padding: 0 .4rem;
}
.alphaNavBar a:hover {
	padding: 0 .4rem;
	border-radius: 2rem;
}
/* end introduction -------------------------------------------------------- */

/* Index Pages ------------------------------------------------------------- */
/* <section .content .index>
using h2 block-h3 block-h4
tested on XI_General.php (still has old stuff)
testing on XI_Spirt.php and checking XI_General
block styles everything that is not a heading2, paragraph, or anchor tag
dynamic content inside of blocks are wrapped in a figure element.
figure elements wrap either video with a figcaption element or
picture elements with a figcaption
2022-0321 - /lib/KJV/I_ScriptNotes.php could use some styling tweaks. It's a giant table.
*/
section.content.index {
	padding: 0 1.5rem 0 0;
}
h2 ~ a {
	display: inline-block;
	margin-left: 1rem;
}
h2 ~ p {
	margin-left: 1rem;
}
.block-2col-flex {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	align-items: flex-start;
	margin: 0 1rem 2rem 1rem;
}
.block-2col-flex ul {
	padding: 0 2rem;
}
.block-2col-flex h3 {
	width: 100%;
	text-align: center;
}
.block-2col-flex figure {
	max-width: 400px;
}
/* 2022-0129 using the wrapper concept to modularize my code
test on /lib/General/N_Covid.php
---------------------------------------------------------------------------- */
figure {
	padding-top: 1rem;
	margin-bottom: 1rem;
}
figure.image {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}
figure.image figcaption {
	text-align: center;
	padding-top: 1rem;
}
/* figure img,
picture img {
	border-radius: 0.5rem;
} */

figure.video {
	max-width: 390px;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	row-gap: 1rem;
	padding: 1em 0;
}
figure.video figcaption {
	text-align: center;
	padding-top: 1rem;
}
/* figure.video video {
	border-radius: 0.5rem;
} */
figure.video h4 {
	max-width: 390px;
	text-align: center;
	padding-top: 1.25em;
}
figure.video .comment {
	max-width: 390px;
	text-align: center;
	padding-top: 1em;
}
/* picture {
	margin: 1rem auto;
} */
/* ------------------------------------------------------------------------- */


section.content.index div.block-h3 {
	margin-left: 1rem;
}
section.content.index .block-h3 p {
	margin-right: 1.5rem;
}
section.content.index div.block-h4 {
	margin-left: 1.5rem;
}
section.content.religion h4 {
	color: var(--clr-darkbrown);
	border-top: 1px solid black;
}
/* -------------------------------------------------------- */

.IndexPages ul li h3 {
	padding-top: 0.4rem;
	margin-bottom: 0.25rem;
}
.IndexPages ul {
	margin-left: 1.5rem;
}
.row-2col-flex.IndexPages {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	justify-items: center;
	gap: 1rem;
	padding: 1rem;
}
.row-2col-flex.IndexPages a:link {
	display: inline-block;
	min-width: 400px;
	padding-left: 1rem;
	border-radius: 2rem;
	margin: 0 auto;
}
section.IndexPages h3 ~ a:link {
	padding-left: 2.5rem;
}
section.IndexPages h4 {
	padding-left: 2.5rem;
}
section.IndexPages h4 ~ a:link {
	padding-left: 3.5rem;
}
/* grid lib/I_KJV.php
---------------------------------------------------------------------------- */
.container {
	max-width: 1200px;
}
div.col4.heading h3,
div.col8.heading h3,
div.col12.heading h3 {
	padding-top: 1em;
	margin-bottom: 1em;
}
div.container#ScriptureStudy_I_Study div.row {
	padding: .5em 0;
}
div.row a {
	padding: .2em .3em;
	text-decoration: none;
	border-radius: 50%;
}
div.row a:hover {
	text-decoration: underline;
}
/* end lib/I_KJV.php specific code ----------------------------------------- */
/* I_Study.php */
nav.I_Study ul li {
	margin: .5em;
}
/* end lib/I_Sudy.php specific code ---------------------------------------- */
/* General Pages - lib/General/N_filename.php specific code
---------------------------------------------------------------------------- */
/* <section.content.general> */
section.content.general p.headline {
	font-size: 1.5rem;
	color: var(--clr-darkbrown);
}
section.content.general ul {
/* 	list-style-type: disc; */
	padding: 0.5rem 2rem;
}
/* end lib/General/N_filename.php specific code ---------------------------- */
/* <section.content.hebrew> */
.block-4col-grid-hebrew {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0 auto;
}
div.col.col1 {
	grid-column-start: 1;
	grid-column-end: 2;
}
div.col.col2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
div.col.col3 {
	grid-column-start: 3;
	grid-column-end: 4;
}
div.col.col4 {
	grid-column-start: 4;
	grid-column-end: 5;
}

/* KJV Pages - lib/KJV/filenameCh##_KJV.php specific code
---------------------------------------------------------------------------- */
/* I also modified .scrB class in block utitlites code */
section.main-container.KJV-page p {
	max-width: 95%;
}
nav.subnav.kjv {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	column-gap: 1rem;
	padding: 1rem 0;
	margin: 0 auto;
}
nav.subnav.kjv a:hover {
	background-color: unset;
	text-decoration: none;
}
nav.subnav.kjv img.zoom {
	transition: transform .2s;
}
.zoom:hover {
  transform: scale(1.15);
  -ms-transform: scale(1.15); /* IE 9 */
  -webkit-transform: scale(1.15); /* Safari 3-8 */
}

/* end KJV Pages ----------------------------------------------------------- */
/* Religion Pages - lib/Religion/N_filename.php specific code
---------------------------------------------------------------------------- */
section.content.religion {
	color: var(--clr-dark);
}
nav.subnav.notePages {
	text-align: right;
}
nav.subnav.notePages img {
	display: inline;
}
section.content.religion h2{
	padding-top: 1.5rem;
	margin-bottom: 1.3rem;
}
section.content.religion ul{
	margin-left: 1.5rem;
}
.block-2col-flex-religion {
	display: flex;
	flex-flow: row wrap;
	justify-content: start;
/* 	margin-left: 1em; */
	padding: 1rem;
/* 	border: 1px dashed black; */
	margin-bottom: 1.5rem;
}
.block-2col-flex-religion .col-left-link {
	width: 200px;
	border: none;
/* 	border: 1px dashed red; */
}
.block-2col-flex-religion .col-right-text {
	max-width: 700px;
	min-width: 600px;
/* 	border: 1px dotted green; */
	border-bottom: 2px solid var(--clr-dark);
}

.block-2col-grid-religion {
	display: grid;
	grid-template-columns: 1fr 5fr;
	grid-template-rows: auto;
	padding-bottom: 1rem;
	padding-top: 1rem;
}
.block-2col-grid-religion .col-left-link {
	grid-column-start: 1;
	grid-column-end: 6;
}
.block-2col-grid-religion .col-right-text {
	grid-column-start: 2;
	grid-column-end: span 5;
	padding-right: 1rem;
	border-bottom: 1px solid var(--clr-darkbrown);
}
.block-2col-grid-religion .col-right-text p {
	max-width: 80ch;
}



section#Prayers * {
	padding: 1rem 0;
	margin: 0;
}
/* end Religion Pages ------------------------------------------------------ */
section#referenceLinks {
	padding: 1rem 0;
}
section#referenceLinks ul {
	margin-left: 1rem;
}
/* footer
---------------------------------------------------------------------------- */
footer.footer-container {
  max-width: 1200px;
	font-size: 1rem;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  padding-bottom: 1rem;
  margin: 0 auto;
}
.footer-title {
	margin: 0 auto;
}
.footer-container p {
	font-family: var(--ff-primary);
}
.footer-container a:link {
	padding: .3rem .4rem;
	border-radius: 2em;
}
.footer-contact {
	text-align: center;
}
.footer-filedata {
	max-width: fit-content;
}

/* I like to include this as it helps me set breakpoints
Extra small (xs) devices (portrait phones, less than 576px)

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

-----

    320px — 480px: Mobile devices
    481px — 768px: iPads, Tablets
    769px — 1024px: Small screens, laptops
    1025px — 1200px: Desktops, large screens
    1201px and more —  Extra large screens, TV
*/
/* media queries
----------------------------------------------------------------------------- */



@media only screen and (min-width: 767px) {
	main {
		-webkit-box-shadow:0 5px 10px #668D3C;
				box-shadow:0 5px 10px #668D3C;
	}

	.block-2col-grid-religion .col-left-link {
		grid-column-start: 1;
		grid-column-end: 2;
		border-bottom: 1px solid var(--clr-darkbrown);
		margin-bottom: 0.6rem;
	}

	.block-2col-grid-religion .col-right-text {
		grid-column-start: 2;
		grid-column-end: span 5;
		padding-left: 2rem;
		margin-bottom: 0.6rem;
	}
}