/* || GENERAL STYLES */
/* The "*" selector below means 'apply this style to everything */
* { 
  box-sizing: border-box; 
}

/* The selector below changes a default 16px font size (which is most browsers' default) to 10px. The 62.5% setting here, does set the default html font to 10px, but notice that the font-size in the body tag sets it a little larger, as it looked too small at 10px, however, keeping the 62.5% here makes it easier to calculate all the other rem's being multiples of 10. */
html {
  font-size: 62.5%;
  width: 100vw;
  height: 100vh;
}

body {
  font: 1.6rem "Times New Roman", Times, serif;   /* font size = 16px */
  line-height: 1.25;
  background-color: #9bdeff; 
  color: #000080;
  margin: auto;
  max-width: 960px;   
  padding: .5rem;  /* 5px */
  overflow-x: hidden;
}

/* Hyperlinks - aka "anchor" links */
a:link {
  color: #0000ee; 
  font-weight: bold;
  font-size: calc(19px + 0.390625vw);
  text-underline-position: under;
}

/* This turns link purple once the user has clicked them */
a:visited a:visited:active {
  color: #551a8b; 
  font-weight: bold;
  font-size: calc(19px + 0.390625vw);
}

a:hover {
  color: #0000ee;
  cursor: pointer;
}

a:focus {
  color: 0000ee;
  outline: 1px #0000ee dotted;
}

a:active {
  color: #ff0000;
  outline: 1px #ff0000 dotted;
}
 
/* Regular text paragraph, <p> in html. This should allow the text to adjust its size according to the viewport width. */
p {
  font-size: calc(19px + 0.390625vw);
  color: #000080;
  text-align: left;
}
 
/* Blue bold text, centered, <p class="a"> in html. */
.a {
  font-size: calc(19px + 0.390625vw);
  font-weight: bold;
  text-align: center;
}
  
/* White bold text, centered, <p class="b"> in html. */
.b {
  font-size: calc(19px + 0.390625vw);
  font-weight: bold;
  text-align: center;
  color: #ffffff;
}

/* White normal weight text, centered, <p class="c"> in html. */
.c {
  font-size: calc(19px + 0.390625vw);
  font-weight: normal;
  text-align: center;
  color: #ffffff;
}

/* Navy normal weight text, centered, <p class="d"> in html. */
.d {
  font-size: calc(19px + 0.390625vw);
  font-weight: normal;
  text-align: center;
  color: #000080;
}

/* White bold text, centered, <p class="e"> in html. */
.e {
  font-size: calc(19px + 0.390625vw);
  font-weight: bold;
  text-align: center;
  color: #ffffff;
  line-height: .5;
}

/* Blue normal LARGE text, centered, <p class="f"> in html. */
.f {
  font-size: calc(1.4rem + 1.2vw);
  font-weight: normal;
  text-align: center;
  color: #000080;
}

/* White normal weight text, left aligned, <p class="g"> in html. */
.g {
  font-size: calc(19px + 0.390625vw);
  color: #ffffff;
  text-align: left;
}

/* White normal LARGE text, centered, <p class="m"> in html. */
.m {
  font-size: calc(1.4rem + 1.2vw);
  font-weight: normal;
  text-align: center;
  color: #ffffff;
}

/* X Large font <p class="xlg"> in html. */
.xlg {
  font-size: calc(3rem + 1.2vw);
}

/* Background image for Become a Member - Blue Balloons */
.blue-balloons {
  position: relative;
  display: flex;
  white-space: nowrap;
  border: solid #000080 .1rem;
  margin: auto;
  justify-content: center;
  align-items: center;
  color: #000080;
  line-height: calc(3rem + 1vw);
  font-size: calc(19px + 0.390625vw);
}

/* Blockquote - indents from both sides <blockquote> ... don't forget to close it with </blockquote>*/
blockquote {
  margin-left: 5rem; 
  margin-right: 5rem;
  font-size: calc(19px + 0.390625vw);
  text-align: left;
} 

/* Blue background with white font <div class="blue"> */  
.blue {
  position: relative;
  border: .3rem solid #3ec0ff;  /* 3px */
  padding: 1.3rem;  /* 13px */
  background-color: #000080; 
  color: #ffffff;
  margin: auto;
  width: 100%;
}

/* This is the 'box model' styling with a navy background, no border and white lettering */
.bluebox {
  background-color: #000080;
  padding: .7rem;
  color: #ffffff;
  max-width: 100%;
  font-size: 2.25rem;
  font-weight: bold;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* For 3px aqua border around images or other elements */
.brdr {
  border: .3rem #3ec0ff solid;
}

/* For 5px navy border around images or other elements */
.brdrnavy {
  border: solid #000080 .5rem;
}

/* For 15px navy border around images or other elements */
.brdrwide {
  border: 1.5rem solid #000080;
  background-color: #3ec0ff;
  margin: auto;
  text-align: center;
  padding: .3rem;
}

.item1 {
  grid-row: 1 / 2;
  grid-column: 1 / 5;
  background-color: #000080;
  color: #ffffff;
  font-weight: bold;
  font-size: calc(16px + 0.390625vw);
  /* font-size: calc(12px + 0.390625vw);
  display: flex; */
  height: 37px;
  align-items: center;
  justify-content: center;
}
.item2 {
  background-color: #9bdeff;
  color: 000080;
  font-weight: bold;
  font-size: calc(10px + 0.390625vw);
  /* display: flex;   */
  height: 37px;
  align-items: center;
  justify-content: center;
}
.item3 {
  background-color: #dff4ff;
  color: 000080;
  font-weight: normal;
  font-size: calc(10px + 0.390625vw);
  /* display: flex; */
  align-items: center;
  justify-content: center;
}

/* This is the 'containing' wrapper for the Bible Characters forum table - each line is a separate grid and each grid is 5 items wide on laptop */
.characters-forum {
  border: .5rem solid #000080;/* 7px */
  background-color: #000080;
  display: grid;
  gap: .1rem;
  padding: .3rem;
  width: 100%;
  margin: auto;
  grid-template-areas:
  "bb1" "tb1" "bb2" "tb2" "bb3" "tb3" "bb4" "tb4" "bb5" "tb5";
}

.characters-item {
  background-color: #ffffff;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  color: #000080;
  font-size: calc(19px + 0.390625vw);
  line-height: 1.25;
  font-weight: normal;
  text-align: center;
  display: block;
  justify-items: center;
  align-items: center;
}

/* Centered text over an image*/
.centered {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  text-align: center;
}

/* Container, has no styling, it is just like an empty table to "contain" things in. <div class="container"> */
.container {
  padding: 0px;
  margin: auto;
  position: relative;
  width: 100%;
  max-width: 100%;
  border: none;
}

/* This is the OUTER box that holds the inner box (content2) for the body, so that it looks like there are two navy blue borders with a turquoise border between them. <div class="content"> */
.content {
  background-color: #3ec0ff;
  padding: .2rem;
  text-align: center;
  color: #000080;  
  border: .3rem solid #000080;  /* 3px */
  display: block;
  margin: auto;
  max-width: 100%;
}

/* This is the INNER box for the body, so that it looks like there are two navy blue borders with a turquoise border between them. <div class="content2"> */
.content2 {
  background-color: #ffffff;
  padding: 1.3rem;  /* 13px */
  text-align: center;
  color: #000080;  
  border: .3rem solid #000080;  /* 3px */
  display: block;
  margin: auto;
  max-width: 100%;
}

.cookies-eu-banner {
  background: #ddd;
  color: #000080;
  padding: 7px;
  font-size: 15px;
  font-family: Arial;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  margin: auto;
  max-width: 100%;
  z-index: 10;
}

.cookies-eu-banner button {
  text-decoration: none;
  background: #fff;
  color: #0000ff;
  border: 1px solid #000080;
  cursor: pointer;
  padding: 4px 7px;
  margin: 0px 0px 0px 14px;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: .05em;
  transition: background 0.07s, color 0.07s, border-color 0.07s;
}

.more-info {
  text-decoration: none;
  background: #fff;
  color: #222;
  border: 1px solid #000080;
  cursor: pointer;
  padding: 4px 7px;
  margin: 0px 14px 0px 0px;
  font-size: 13px;
  font-weight: bold;
  transition: background 0.07s, color 0.07s, border-color 0.07s;
}

.cookies-eu-banner a:link {
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
}

.cookies-eu-banner button:hover {
  background: #fff;
  color: #222;
}

.hidden {
  display: none;
}

/* Division ... DON'T FORGET to always close it with </div> */
div {
  font-size: calc(1rem + 1.5vw);
}

/* This is the styling for the background for scripture that looks like a piece of blue paper with rounded edges, lifted up off the page. The same is used for our Purity Publications Poetry e-books to separate each poem.  ... DON'T FORGET the </div>. */
.drop-shadow {
  position: relative;
  float: center;
  width: 95%;
  padding: 1em;
  margin: auto;
  background: #f7fbfd;
  box-shadow:0 1rem 1rem -.5rem rgba(0, 0, 0, 0.3), 0 0 .7rem rgba(0, 0, 0, 0.1) inset;
}

.drop-shadow:before,
.drop-shadow:after {
  content:"";
  position: absolute;
  z-index: -2;
}

/* This is what makes it look like lifted corners */
.lifted {
  border-radius: .7rem;   /* 7px */
}

.lifted:before,
.lifted:after {
  bottom: 1.5 rem;   /* 15px */
  left: 1 rem;   /* 10px */
  width: 50%;
  height: 20%;
  max-width: 3 rem;   /* 3px */
  max-height: 1 rem;   /* 1px */
  box-shadow: 0 1.5rem 1rem rgba(0, 0, 0, 0.7);
  transform: rotate(-3deg);
}

.lifted:after {
  right: .1 rem;
  left: auto;
  transform: rotate(3deg);
}

/* This is end of the styling code for scripture backgrounds */
.fit {
  margin: auto;
  width: fit-content;
  height: fit-content;
  padding: 0;
}

/* This is the 'containing' wrapper for four column table on laptop, one column on mobile and tablet */
.fourcol {
  border: .5rem solid #000080;/* 7px */
  background-color: #3ec0ff;
  display: grid;
  gap: .2rem;
  padding: .3rem;
  width: 100%;
  margin: auto;
  grid-template-areas:
  "tb1"
  "tb2"
  "tb3"
  "tb4"
  "tb5"
  "tb6"
  "tb7"
  "tb8";
}

/* This is the grid styling for the 70th Week of Daniel section */
.grid {
  border: .5rem solid #000080;/* 7px */
  background-color: #3ec0ff;
  display: grid;
  gap: .2rem;
  padding: .25rem;
  width: 100%;
  margin: auto;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: auto;
  grid-template-rows: min-content;
  align-content: center;
}

/* This is the grid styling for the logo section */
.grid-container1 {
  display: grid;
  grid-template-columns: 9.4rem 1fr;
  grid-template-rows: 9.4rem;
  padding: .3rem;
  justify-content: space-between;
  align-items: center;
  background-color: #000080;
  border: .4rem solid #000080;  /* 7px */
}

/* This is the grid styling for the cool-clicks section */
.grid-container2 {
  display: grid;
  grid-template-columns: 1fr 9.4rem;
  gap: 0rem 0rem;
  padding: .7rem;
  justify-content: space-between;
  align-items: center;
  background-color: #000080;
}

/* This is the grid styling for the love-offerings section */
.grid-container3 {
  display: grid;
  grid-template-columns: 1fr 8.6rem;
  gap: 0rem 0rem;
  padding: .7rem;
  justify-content: space-between;
  align-items: center;
  background-color: #000080;
}

.grid-container3b {
  display: grid;
  border: .7rem solid #000080;/* 7px */
  gap: .3rem;
  padding: .3rem;
  justify-content: stretch;
  align-items: stretch;
  background-color: #3ec0ff;
  max-width: 100%;
  grid-template-areas:
  "bb1"
  "bb2";
}

/* This is for the Spirit Within Beast Without banner. */
.grid-container3c {
  border: .7rem solid #000080;/* 7px */
  background-color: #3ec0ff;
  display: grid;
  gap: .3rem;
  padding: .3rem;
  max-width: 100%;
  grid-template-areas:
  "bb1"
  "bb2";
}

/* Different sizes of text, commonly called "Headings" in website design. Only one <h1> allowed per page. */
h1 {
  font-size: 2.5rem;
  text-align: center;  
  margin: 0;
}

h2 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 0;
}

/* This is used on the blue tables at the bottom of studies with links to end times studies */
.half-width {
  height: auto;
  max-width: 50%;
  margin: auto;
}

hr.thin { 
  border: 0; 
  height: 2px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #3ec0ff, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}

/* For hyperlink blue font, class="hyper" */
.hyper {
  color: #0000ff;
  text-align: center;
}

/* Images - this will supposedly keep them centered in their element. */
img {
  display: block;
  position: relative;
  margin: auto;
  background-color: #9bdeff;
  max-width: 100%;
  height: auto;
  font-size: calc(14px + 0.390625vw);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: #000080;
  text-align: left;
}

/* This is the text styling for the logo section on mobile */
.item-text1 {
  grid-column: 2 / 3;
  font-family: 'Times New Roman', Times, serif; 
  font-weight: normal;
  font-size: 2.5rem;
  line-height: 1.5;  
  color: #ffffff;
  height: 9.4rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  margin: 0;
  justify-content: center;
  align-items: center;
  background-color: #000080;
}

/* This is the text styling for the logo section on larger screens */
.item-text1a {
  grid-column: 2 / 3;
  font-family: 'Times New Roman', Times, serif; 
  font-weight: normal;
  font-size: 5rem;
  line-height: 1;
  color: #ffffff;
  display: none;
  height: 12.4rem;
  text-align: center;
  background-color: #000080;
}

/* This is the text styling for the cool-clicks section on mobile */  
.item-text2 {
  grid-column: 1 / 2;
  font-family: 'Times New Roman', Times, serif; 
  font-style: normal;
  font-weight: normal;
  font-size: 2.75rem;
  color: #ffffff;
  text-align: center;
  background-color: #000080;
}

/* This is the text styling for the love-offerings section on mobile */
.item-text3 {
  grid-column: 1 / 2;
  font-size: 2.1rem;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  background-color: #000080;
}

/* This is image of the palms on the left side of the logo section */  
.item-1 {
  height: 9.4rem;
  width: 9.4rem;
  background-color: #9bdeff;
  border: .3rem solid #3ec0ff;  /* 3px */  
  grid-column: 1 / 2;
  background-repeat: no-repeat;
  background-size: 88px 88px;
  background-image: image-set(
    "https://www.christianityoasis.com/images/logo-left-side.webp" type("image/webp"),
    "https://www.christianityoasis.com/images/logo-left-side.png" type("image/png")
  );
}

/* This is image of the palms on the right side of the cool-clicks section */  
.item-a {
  display: flex;
  margin: auto;
  justify-content: center;
  align-items: center;
  background-color: #9bdeff;
  border: .3rem solid #3ec0ff;  /* 3px */  
  grid-column: 2 / 3;
}

/* This is image of the window of heaven (right side) in the love-offerings section */  
.item-z {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 11.3rem;
  width: 8.6rem;
  border: .3rem solid #3ec0ff;  /* 3px */
  grid-column: 2 / 3;
  float: right;
}

/* This is the square image for Living Water */
div.living-water-square {
  background-repeat: no-repeat;
  color: #ffffff;
  width: 100%;
  background-size: cover;
  background-position: center;
}

@media (max-width: 569px) {
.lazy {
   display: none;
   background-color: #000080;
}
}

.left {
  text-align: left;
}

.no-mirage {
  font-family: 'Times New Roman', Times, serif;
  font-weight: 400;
  font-style: normal;
}

/* START of navigation bar for MOBILE and TABLET */
/* This is the styling of the block that holds the hamburger */
nav {
  background-color: #ffffff;
  height: 3.5rem;
  padding: 0 .5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

/* This hides the menu until the hamburger is clicked */
nav .m-menu__checkbox {
  display: none;
}

/* This makes the cursor into a pointer finger instead of an arrow when the hamburger is hovered, also, this is the size for the hamburger and the X that closes the menu */
nav label.m-menu__toggle {
  cursor: pointer;
  font-size: 4.5rem;
  
}

/* Below are the dimensions, position, size, manner of entrance, etc. of the menu once hamburger is clicked, it is also the background of the unordered lists */
nav .m-menu {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 32rem;
  width: calc(100vw - 3rem);
  height: 100%;
  transform: translate3d(-450px, 0, 0);
  transition: transform 0.35s;
  z-index: 1;
  overflow: hidden;
  background-color: #ddd; 
}

/* This is the opaque grey that shadows the website when the menu is open in mobile */
nav .m-menu__overlay {
  background-color: rgba(103, 103, 103, 0.5);
  position: absolute;
  top: 0;
  width: 100%;
  bottom: 0;
  z-index: 1;
  display: none;
}

/* This makes the background of the title of [each] menu a little darker grey */
nav .m-menu__header {
  padding: 0 1.6rem;
  height: 5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: .1rem solid #e8e8e8;
}

/* Styling for the menu title(s) */
nav .m-menu__header span {
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  width: 100%;
}

/* This causes the slide in effect */
nav .m-menu .m-menu {
  transform: translate3d(480px, 0, 0);
}

/* Block that holds the unordered lists. Adds a scrollbar if the list is too long for screen and no bullets on list items */
nav .m-menu ul {
  height: 100%;
  overflow-y: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The styling of the unordered lists, items, labels */
nav .m-menu ul li a, nav .m-menu ul li label {
  display: block;
  text-align: left;
  padding: 0 1.5rem;
  line-height: 3.75rem;
  text-decoration: none;  
  color: #0000ff;
  background-color: #f9f9f9;
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: normal;
  border-bottom: .1rem solid #e8e8e8;
  position: relative;
}

/* This is a hover effect on the list items */
nav .m-menu ul li:hover, nav .m-menu ul li a:hover, nav .m-menu ul li label.a-label__chevron:hover {
  background-color: #e8e8e8;
}

/* The right pointing arrows (or chevrons) for each of the 5 list items that have dropdowns [these are actually squares that have borders on the top and right side, then are turned 45 degrees on point to create the chevrons */
nav .m-menu ul li label.a-label__chevron::after {
  content: "";
  position: absolute;
  display: inline-block;
  height: 1rem;
  width: 1rem;
  border-color: #000080;
  border-style: solid;
  border-width: .1rem .1rem 0 0;
  transform: rotate(45deg);
  top: 50%;
  margin-top: -.5rem;
  right: 1.6rem;
}

/* Unknown */
nav .m-menu ul li .-invisible {
  border-bottom: 0;
}

/* Styling for the left facing chevrons that close the second tier menus */
nav .m-menu .m-menu label.m-menu__toggle {
  display: flex;
  border-bottom: 0;
  padding: 0;
  color: #000080;
  box-sizing: content-box;  
  background-color: #ddd;
  font-size: 2.5rem;
}

/* This brings up second tier Menu overlay */
nav .m-menu__checkbox:checked ~ .m-menu__overlay {
  display: block;
}

/* This is the manner of entrance for second tier menus */
nav .m-menu__checkbox:checked ~ .m-menu {
  transform: translate3d(0, 0, 0);
}

/* End of nav CSS for MOBILE and TABLET*/

/* START of horizontal navigation CSS for LARGER screens */

/* This is the styling of the block that holds the menu and the overflow property is so it doesn't create a scroll bar */
.navbar {
  display: flex;
  overflow: hidden;
  background-color: #ffffff;
  justify-content: space-between;
  align-items: center;
}

/* This is for 'Home' and 'Contact Us' ONLY, in the horizontal navbar*/
.navbar a {
  float: left;
  font-size: calc(1rem + .7vw);
  font-weight: normal;
  color: #0000ff;
  text-align: center;
  padding: calc(1rem + .1vw) calc(1rem + .1vw);
  text-decoration: none;
}

/* This aligns the dropdown box on the left side with the button above it and will not cause a scrollbar if the list is too long */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Styling for the 5 middle buttons that are not hyperlinks, but activate the dropdown(s) when hovered */
.dropdown .dropbtn {
  font-size: calc(1rem + .7vw);  
  border: none;
  outline: none;
  color: #0000ff;
  padding: calc(1rem + .1vw) calc(1rem + .1vw);
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Causes the links and buttons in the horizontal bar to turn darker grey when hovered over */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #ddd;
}

/* The styling for the light grey box that drops down, including the shadow around the edges of it */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 16rem;
  box-shadow: 0rem .8rem 1.6rem 0rem rgba(0,0,0,0.2);
  z-index: 1;
}

/* Styling for the links in the dropdown boxes, i.e. no underline, blue text, align left, etc. */
.dropdown-content a {
  float: none;
  color: #0000ff;
  padding: .7rem 1rem;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* This causes the background of the links in the dropdown boxes to turn darker grey when hovered over */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Unknown */
.dropdown:hover .dropdown-content {
  display: block;
}
/* End of horizontal navbar CSS*/

.no-bottom {
  border-bottom: 0rem;
  padding-bottom: 0rem;
  margin: 0rem;
}

.no-top {
  border-top: 0rem;
  padding-top: 0rem;
  margin: 0rem;
}

/* Ordered List */
ol {
  margin: 10px 10px;
  font-size: calc(19px + 0.390625vw);
  font-weight: normal;
  color: #000080;
  text-align: left;
}

.opti-right {
  background-color: #ffffff;
  padding: 1.5rem .7rem 0rem .7rem;
  color: #000080;
  font-size: calc(19px + 0.390625vw);
  font-weight: normal;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.opti-right p.a {
  margin-bottom: 0;
}

.optiwhite {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: .7rem;
  color: #000080;
  font-size: calc(19px + 0.390625vw);
  font-weight: normal;
  text-align: center;
  align-items: center; 
  justify-content: center;
  line-height: 1;
}

/* This is for the table on the forum page */
.pages {
  background-color: #e1f7fb;
  padding: 1.75rem;
  color: #000080;
  font-size: calc(19px + 0.390625vw);
  line-height: 1;
  font-weight: bold;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  object-fit: scale-down;
}

/* For the Oasis Title and Copyright, for print only. */
.printonly {
  display: none;
}

/* Quotes ... or rather 'smart quotes' or 'curly quotes.' */
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

/* For border-radius on images or any element" */
.radius {
  border-radius: 5px;
  background-color: #ffffff;
}

/* For red font, class="rdltr" */
.rdltr {
  color: #a80000;
}

/* For related studies "tables," class="related" */
.related {
  display: grid;
  border: .5rem solid #000080;
  background-color: #3ec0ff;
  display: grid;
  margin: auto;
  max-width: 100%;
  text-align: center;
  gap: .3rem;
  padding: .3rem;
  grid-template-areas:
  "related-top"
  "related-bottom";
}

/* For related studies white bottom section */
.related-bottom {
  border: .1rem solid #000080;
  background-color: #ffffff;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

/* For related studies blue top section */
.related-top {
  background-color: #000080;
  text-align: center;
  color: #ffffff;  
}

/* For 77% "tables," with turquoise top cell class="related-turquoise" */
.related-turquoise {
  display: grid;
  border: .5rem solid #000080;
  background-color: #3ec0ff;
  margin: auto;
  text-align: center;
  gap: .3rem;
  padding: .3rem;
  width: 77%;
  grid-template-areas:
  "related-turquoise-top"
  "related-bottom";
}

/* For related studies turquoise top section */
.related-turquoise-top {
  border: .1rem solid #000080;
  background-color: #e1f7fb;
  text-align: center;
  color: #000080;
  padding: 1.3rem;
  max-width: 100%;
}

.same {
    width: 150px;
    height: 150px;
    object-fit: cover;
}

/* Blue lettered Scripture, <p class="scripture-blue"> in html. */
.scripture-blue {
  font-size: calc(19px + 0.390625vw);  
  color: #000080;
}
  
/* Red lettered Scripture, <p class="scripture-red"> in html. */
.scripture-red {
  font-size: calc(19px + 0.390625vw); 
  color: #a80000;
}

/* Sections - no real style, it just tells Google that all things are related within the <div class="section">. */
.section {
  padding: 0px;
  margin: auto;
  max-width: 100%;
}

/* Small font class="sf" */
.sf {
  font-size: 1em;
}
 
sup {
  font-weight: bold;
}

.threecol-item {
  border: .1rem solid #000080;
  background-color: #e1f7fb;
  padding: 1rem;
  width: 100%;
  color: #000080;
  font-size: calc(19px + 0.390625vw);
  font-weight: normal;
  align-items: center;
}

/* No underline on hyperlink - tdn = text decoration none */  
.tdn {
  text-decoration: none;
}

.thebookright {
  background-color: #ffffff;
  padding: .7rem;
  color: #000080;
  font-size: calc(19px + 0.390625vw);
  font-weight: normal;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

/* This is the 'containing' wrapper for three column table */
.threecol {
  border: .5rem solid #000080;/* 7px */
  background-color: #3ec0ff;
  display: grid;
  gap: .2rem;
  padding: .3rem;
  width: 100%;
  margin: auto;
  grid-template-areas:
  "tb1"
  "tb4"
  "tb2"
  "tb5"
  "tb3"
  "tb6";
}

/* For use with <u> or to underline text, use <span class="u"> ... and DON'T FORGET the </span>. */
u, .u {
  text-decoration: underline;
  text-underline-position: under;
}

/* Unordered List */
ul {
  line-height: 1.5;
  font-size: calc(19px + 0.390625vw);
  font-weight: normal;
  color: #000080;
  text-align: left;
}

/* Remove bullets */
ul.no-bullets {
  margin-right: 2rem;
  margin-left: 2rem;
  line-height: 1.5;
  font-size: calc(19px + 0.390625vw);
  font-weight: normal;
  color: #000080;
  text-align: left;
  list-style-type: none; 
}

/* Beginning of styles for grid items. */
.bb1 {grid-area: bb1;} .bb2 {grid-area: bb2;} .bb3 {grid-area: bb3;} .bb4 {grid-area: bb4;} .bb5 {grid-area: bb5;} .bb6 {grid-area: bb6;} .bb7 {grid-area: bb7;} .bb8 {grid-area: bb8;} .bb9 {grid-area: bb9;} .bb10 {grid-area: bb10;}

.tb1 {grid-area: tb1;} .tb2 {grid-area: tb2;} .tb3 {grid-area: tb3;} .tb4 {grid-area: tb4;} .tb5 {grid-area: tb5;} .tb6 {grid-area: tb6;} .tb7 {grid-area: tb7;} .tb8 {grid-area: tb8;} .tb9 {grid-area: tb9;} .tb10 {grid-area: tb10;} .tb11 {grid-area: tb11;} .tb12 {grid-area: tb12;} .tb13 {grid-area: tb13;} .tb14 {grid-area: tb14;} .tb15 {grid-area: tb15;} .tb16 {grid-area: tb16;} .tb17 {grid-area: tb17;} .tb18 {grid-area: tb18;} .tb19 {grid-area: tb19;} .tb20 {grid-area: tb20;} .tb21 {grid-area: tb21;} .tb22 {grid-area: tb22;} .tb23 {grid-area: tb23;} .tb24 {grid-area: tb24;} .tb25 {grid-area: tb25;} .tb26 {grid-area: tb26;} .tb27 {grid-area: tb27;} .tb28 {grid-area: tb28;} .tb29 {grid-area: tb29;} .tb30 {grid-area: tb30;} .tb31 {grid-area: tb31;} .tb32 {grid-area: tb32;} .tb33 {grid-area: tb33;} .tb34 {grid-area: tb34;} .tb35 {grid-area: tb35;} .tb36 {grid-area: tb36;} .tb37 {grid-area: tb37;} .tb38 {grid-area: tb38;} .tb39 {grid-area: tb39;} .tb40 {grid-area: tb40;} .tb41 {grid-area: tb41;} .tb42 {grid-area: tb42;} .tb43 {grid-area: tb43;} .tb44 {grid-area: tb44;} .tb45 {grid-area: tb45;} .tb46 {grid-area: tb46;} .tb47 {grid-area: tb47;} .tb48 {grid-area: tb48;} .tb49 {grid-area: tb49;} .tb50 {grid-area: tb50;} .tb51 {grid-area: tb51;} .tb52 {grid-area: tb52;} .tb53 {grid-area: tb53;} .tb54 {grid-area: tb54;} .tb55 {grid-area: tb55;} .tb56 {grid-area: tb56;} .tb57 {grid-area: tb57;}

.wb1 {grid-area: wb1;} .wb2 {grid-area: wb2;} .wb3 {grid-area: wb3;} .wb4 {grid-area: wb4;} .wb5 {grid-area: wb5;} .wb6 {grid-area: wb6;} .wb7 {grid-area: wb7;} .wb8 {grid-area: wb8;}


/* White background with blue lettering, used in footer because it has wider padding <div class="white">. */
.white {
  position: relative;
  border: .3rem solid #3ec0ff;  /* 3px */
  padding: 1.3rem;   /* 13px */
  background: #ffffff; 
  color: #000080;
}

/* This is the 'box model' styling with a white background, no border and navy lettering */
.whitebox {
  background-color: #ffffff;
  padding: .7rem;
  color: #000080;
  font-size: calc(19px + 0.390625vw);
  font-weight: bold;
  text-align: center;
}

.wide-width {
  width: 100%;
}

/* This is the 'containing' wrapper for the Christian Clicks section */
.wrapper {
  border: .5rem solid #000080;/* 7px */
  background-color: #3ec0ff;
  display: grid;
  gap: .5rem;
  padding: .5rem;
  grid-template-areas:
  "wb1"
  "bb1"
  "wb2"
  "wb3"
  "wb4"
  "bb2"
  "wb5"
  "wb6"
  "wb7"
  "wb8";
}

/* This is the 'containing' wrapper/grid for the optimization-paragraph section in mobile */
.wrapper-opti {
  border: .7rem solid #000080;/* 7px */
  background-color: #3ec0ff;
  display: grid;
  gap: .3rem;
  padding: .3rem;
  max-width: 100%;
  grid-template-areas:
  "bb1"
  "wb1";
}

/* This is for no padding */
.zpad {
  padding: 0rem;
}

/* The CSS below with aqua colored letters are 'id' or 'identification' names */
/* This is the styling code for the aqua inner border in the footer */
#aqua {
  padding: .7rem; 
  border-width: .1rem solid #3ec0ff;
  margin: .4vw;
}

/* This is the styling code for the thick navy border in the footer */
#fancyfooter {
  border: calc(1rem + 4vw) solid #000080;
}

/* This concerns the bottom margin that was too wide on turquoise link boxes */
#fixbtm {
  margin-bottom: -.3rem;
}

/* This concerns the love offerings section */
#luv-1 {
  border: .5rem solid #000080;
}

/* This concerns the love offerings section */
#luv-2 {
  border: .1rem solid #000080;
}

#mall-banner {
  width: 100%;
  margin: auto;
  padding: 3rem;
  background-color: #3ec0ff;
  border-right: .5rem;
  border-left: .5rem;
  border-top: 0rem;
  border-bottom: 0rem;
  border-color: #000080;
  border-style: solid;
}

#mall-2 {
  border-width: .2rem; 
  border-bottom: none;
}

#memban {
  margin: auto;
  width: 100%;
}

#members-banner {
  width: 100%;
  margin: auto;
  padding: 0rem 3rem 3rem 3rem;
  background-color: #3ec0ff;
  border-right: .5rem;
  border-left: .5rem;
  border-top: 0rem;
  border-bottom: 0rem;
  border-color: #000080;
  border-style: solid;
}

#no-bg {
  background-color: rgba(0,0,0,0.0);
}

/* This is the styling code for wikipedia background */
#wiki-def {
  background: #f7f7f7;
  padding: .5em;
}

/* The CSS below begins the media queries that make changes to the different elements as the viewport becomes larger. They are not in alphabetical order, but in numerical order of width. */

/*The CSS below is for adding the opposite sun palms logo on the header at the top of the page and the one at cool clicks, once the viewport reaches 450px */
@media (min-width: 450px) {
.item-text1 {
  font-size: 3rem;
  padding: .75rem;
  height: 9.4rem;
}
}

/* The code below is for keeping the Related Studies and Christian Walk Studies boxes at 50% width */
@media (min-width: 569px) {
  
section#read-more .related { 
  width: 50%; 
}

#memban {
  max-width: 50%;
  margin: auto;
}

/* This is for transforming the logo section from one column to three columns when the viewport reaches 569px */  
.grid-container1 {  
  grid-template-columns: 14rem 1fr 14rem;
  grid-template-rows: 12.4rem;
  gap: .3rem;
  justify-content: space-between;
  align-content: center;
  border: .7rem solid #000080;  /* 7px */
  background-color: #3ec0ff;
}

/* This makes the aqua colored area around the logo larger in the logo section when the viewport reaches 569px */
.item-1 {
  background-position: center;
  padding: 2rem;
  height: 12.4rem;
  width: 14rem;
  display: flex;
  justify-items: center;
  align-items: center;
  border: none;
  background-repeat: no-repeat;
  background-size: 100px 100px;
}

/* This adds the right logo in the logo section when the viewport reaches 569px */
.item-2 {   
  background-position: center;
  padding: 2rem;
  height: 12.4rem;
  width: 14rem;
  display: flex;
  justify-items: center;
  align-items: center;
  background-color: #9bdeff;
  grid-column: 3 / 4;
  background-repeat: no-repeat;
  background-size: 100px 100px;
  background-image: image-set(
    "https://www.christianityoasis.com/images/logo-right-side.webp" type("image/webp"),
    "https://www.christianityoasis.com/images/logo-right-side.png" type("image/png")
  );
}

/* This adds the left logo in the cool-clicks section when the viewport reaches 569px */
.item-b {
  display: flex;
  margin: auto;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  height: 12.4rem;
  width: 14rem;
  background-color: #9bdeff;
  border: .3rem solid #3ec0ff;  /* 3px */ 
  grid-column: 1 / 2;
}

/* This makes the text larger in the logo section when the viewport reaches 569px */
.item-text1 {
  font-size: 3rem;
  padding: 1.75rem;
  height: 12.4rem;
}

/* This transforms the grid position and makes the text larger in the cool-clicks section when the viewport reaches 569px */  
.item-text2 {
  grid-column: 2 / 3;
  font-size: 4.75rem;
  color: #ffffff;
}

/* This transforms the grid position and makes the text larger in the love-offerings section when the viewport reaches 569px */
.item-text3 {
  grid-column: 2 / 3;
  font-size: 2.1rem;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  background-color: #000080;
}

/* This transforms the grid position and makes the makes the aqua colored area around the logo larger in the cool-clicks section when the viewport reaches 569px */  
.item-a {
  grid-column: 3 / 4;
  padding: 2rem;
  height: 12.4rem;
  width: 14rem;
}

/* This adds the left window of heaven image in the love-offerings section when the viewport reaches 569px */  
.item-y {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 11.3rem;
  width: 8.6rem;
  border: .3rem solid #3ec0ff;  /* 3px */
  grid-column: 1 / 2;
  float: right;
}

/* This transforms the grid position of the right window of heaven image when the viewport reaches 569px */  
.item-z {
  grid-column: 3 / 4;
  height: 11.3rem;
  width: 8.6rem;
}

/* This transforms the cool-clicks section from two columns to three when the viewport reaches 569px */
.grid-container2 {
  display: grid;
  grid-template-columns: 14rem 1fr 14rem;
}

/* This transforms the love offerings section from two columns to three when the viewport reaches 569px */
.grid-container3 {
  display: grid;
  grid-template-columns: 8.6rem 1fr 8.6rem;
}

.grid-container3b {
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
  "bb1 bb2";
}

.grid-container3c {
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
  "bb1 bb2";
}

/*This sets the directory grid for tablet size viewports */
.wrapper {
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
  "wb1  wb1  wb1  wb1  wb1  wb1"
  "bb1  bb1  bb1  bb1  bb1  bb1"
  "wb2  wb2  wb3  wb3  wb4  wb4"
  "bb2  bb2  bb2  bb2  bb2  bb2"
  "wb5  wb5  wb5  wb6  wb6  wb6"
  "wb7  wb7  wb7  wb8  wb8  wb8";
}

/* This is the 'containing' wrapper for three column table */
.threecol {
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
  "tb1  tb2  tb3"
  "tb4  tb5  tb6";
}
}
/* End of CSS for Media Queries min-width: 569px */

@media only screen and (min-width: 600px) {  

/* This transforms the optimization paragraph section from one column to two columns when the viewport reaches 600px */  
.wrapper-opti {
  grid-template-columns: 4fr 6fr;
  grid-template-areas: "bb1 wb1";
  max-width: 100%;
}

/* Different sizes of text, commonly called "Headings" in website design. Only one <h1> allowed per page. */
h1 {
  font-size: calc(1.3rem + 1.2vw);
  text-align: center;  
  margin: 0;
}

h2 {
  font-size: calc(1.3rem + 1vw);
  text-align: center;
}
}
/* End of CSS for Media Queries min-width: 600px */

@media only screen and (max-width: 663px) {

/* This keeps the Living Water banner hidden for mobile */
div#living-water-banner {
  display: none; 
}
}
/* End of CSS for Media Queries max-width: 663px */

@media only screen and (min-width: 664px) {
/* This keeps the Living Water square hidden for tablet and above */

div#living-water-square {
  display: none; 
}
}
/* End of CSS for Media Queries min-width: 664px */
 
/* This keeps the horizontal navbar hidden on any viewport less than 727px*/
@media (max-width: 727px) {
.navbar {
  display: none;
}
  
/* This keeps the mall banner hidden on mobile */
div#mall-2 { 
  display: none; 
}
}
/* End of CSS for Media Queries max-width: 727px */

/* This hides the mobile navigation on viewports above 728px */
@media (min-width: 728px) {

#memban {
  max-width: 37%;
  margin: auto;
}

nav {
  display: none;
}

/* This hides the mall 'square' if viewport is wider than 728px */
div#mall-1 { 
  display: none; 
}

/* Small font class="sf" */
.sf {
  font-size: .57em;
}
}
/* End of CSS for Media Queries min-width: 728px */


@media (min-width: 768px) {

/* This changes the thickness of the border on the logo header at large tablet size */
.grid-container1 {
  border: 1.3rem solid #000080;  /* 13px */
}

/* This hides Faith is no mirage on larger screens */
.item-text1 {
  display: none;
}

/* This changes 'Faith ... is no mirage' into 'Where Christianity is C-O-O-L' on 768 and larger screens */
.item-text1a {
  display: block;
  padding: 1rem;
}

/* This is the grid template for the directory (cool clicks) above 768px */
.wrapper {
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
  "wb1  wb1  wb1  wb1  wb1  wb1  wb1  wb1  wb1  wb1  wb1  wb1"
  "bb1  bb1  bb1  bb1  bb1  bb1  bb1  bb1  bb1  bb1  bb1  bb1"
  "wb2  wb2  wb2  wb2  wb3  wb3  wb3  wb3  wb4  wb4  wb4  wb4"
  "bb2  bb2  bb2  bb2  bb2  bb2  bb2  bb2  bb2  bb2  bb2  bb2"
  "wb5  wb5  wb5  wb6  wb6  wb6  wb7  wb7  wb7  wb8  wb8  wb8";
}

/* This is the 'containing' wrapper for the Characters forum table on laptop - each line is a separate grid and each grid is 5 items wide on laptop */
.characters-forum {
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas:
  "bb1 bb2 bb3 bb4 bb5"
  "tb1 tb2 tb3 tb4 tb5";
}

/* This is the 'containing' wrapper for four column table on laptop, one column on mobile and tablet*/
.fourcol {
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
  "tb1  tb3  tb5  tb7"
  "tb2  tb4  tb6  tb8";
}

/* This contains the body of the study to 88% on larger screens so that the line length doesn't cause eye fatigue. */
section#main-content {
  width: 88%;
  margin: auto;
}
.narrow {
  width: 88%;
  margin: auto;
}
}
/* End of CSS for Media Queries min-width: 768px */

/* The CSS below is for printing out with a printer, it turns off most everything but the main content of the study (or page). */

@media print {
  
/* turn off cookie consent */
section#cookie-consent { display:none; }

/* turn off logo header */
section#logo { display:none; }

/* turn off navigation section */
section#navigation { display:none; }
 
/* turn off Spirit of Truth and optimization paragraph section */
section#optimization-paragraph { display: none; }

/* turn off go-to-home section */
section#go-to-home { display: none; }

/* turn off Google Ads sections */
section#google-ads { display: none; }

/* turn off Living Water banners section */
section#living-water { display: none; }

/* turn off The Book Ad banners section */
section#the-book-ad { display: none; }

/* turn off New Testament Table area */
section#new-testament-table { display: none; }

/* turn off Steps area */
section#cccc-steps { display: none; }

/* turn off Related Studies area */
section#read-more { display: none; }

/* turn off External Links area */
section#external-links { display: none; }

/* turn off C-O-O-L Clicks*/
section#cool-clicks { display: none; }

/* turn off Directory */
section#directory { display: none; }

/* turn off Mall Banners */
section#the-mall { display: none; }

/* turn off Members Banner */
section#become-member { display: none; }

/* turn off Donations Box */
section#love-offerings { display: none; }

/* turn off Footer/Copyright Box */
section#footer { display: none; }

/* Gives 1/2 inch margin on all four sides */
@page {
  margin: 0.5in;
}

/* Styling for the body of the study */ 
body {
  font-size: 11pt;
  font-family: "Times New Roman", Times, serif;
  line-height: 1.3;
  color: #000000;
  background-color: transparent;
  max-width: 100%;
  padding: 0px;
}

/* This is styling for paragraphs */
p {
  color: #000000;
  text-align: justify;
  text-indent: 0rem;
}

/* This makes links print in black */
p.a {
  color: #000000;
  text-align: center;
  text-indent: 0rem;
}

/* This makes blue boxes with titles print without borders and white background <div class="blue"> */  
.blue {
  position: relative;
  border: 0;
  padding: 0rem;
  background-color: #ffffff; 
  color: #000000;
  width: 100%;
}

/* This makes blue boxes with titles print without borders and white background <div class="bluebox"> */
.bluebox {
  background-color: #ffffff;
  padding: 0;
  color: #000000;
  font-size: 2.25rem;
  font-weight: bold;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* This is styling for scripture */
.scripture-blue {
  text-align: justify;
  text-indent: 0rem;
}
/* This is styling for scripture */
.scripture-red {
  text-align: justify;
  text-indent: 0rem;
}

/* This is styling for scripture */
.container {
  max-width: 100%;
}

/* This is styling for anything with class="content." */
.content {
  background-color: #ffffff;
  padding: 0;
  color: #000000;
  border-width: 0px;
  display: block;
  margin: 0px;
  max-width: 100%;
}

/* This is styling for anything with class="content2." */
.content2 {
  background-color: #ffffff; 
  padding: 0px;
  color: #000000;  
  border-width: 0px; 
  display: block;
  margin: 0px;
  max-width: 100%;
}

/* This is styling for scripture boxes. */
.drop-shadow {
  background-color: #transparent;
  box-shadow: none;
}

.lifted:before,
.lifted:after {
  box-shadow: none;
}

.drop-shadow lifted a {
  text-align: center;
}

/* This is so that any images will only print 3 1/2 inches wide */
img {
  max-width: 3.5in;
}

/* This is styling for the title and copyright that are hidden online. */
.printonly {
  display: block;
  text-indent: 0rem;
}
}
/* This is the end of the CSS for formatting webpages to print out on printers. */