* {box-sizing: border-box;}

body {margin: 0px; padding: 0px;}
a.hlink_1, a.hlink_1:link {color:#000000; text-decoration:none;}
a.hlink_1:visited {color:#000000; text-decoration:none;}
a.hlink_1:hover {color:#0000ff; text-decoration:underline;}
a.hlink_1:active {color:#0000ff; text-decoration:underline;}
a.hlink_2, a.hlink_2:link {color:#000000; text-decoration:none;}
a.hlink_2:visited {color:#000000; text-decoration:none;}
a.hlink_2:hover {color:#0000ff; text-decoration:underline;}
a.hlink_2:active {color:#0000ff; text-decoration:underline;}
a.hlink_3, a.hlink_3:link {color:#000000; text-decoration:none;}
a.hlink_3:visited {color:#000000; text-decoration:none;}
a.hlink_3:hover {color:#0000ff; text-decoration:underline;}
a.hlink_3:active {color:#0000ff; text-decoration:underline;}

body, html {
  font-family: Arial;
  margin: 0;
  border-top: 132px;
}
  
.Body-P
{
    margin:0.0px 0.0px 0.0px 0.0px; text-align:left; font-weight:400; text-indent:0.0px;
}
.Table-Body-P
{
    margin:0.0px 0.0px 0.0px 0.0px; text-align:center; font-weight:400; text-indent:0.0px;
}
.Table-Body-C
{
    font-family:"Arial", sans-serif; font-size:13.0px; line-height:1.23em;
}
.Text-C
{
    font-family:"Arial", sans-serif; color:#008000; font-size:32.0px; line-height:1.16em;
}
.Body-P-P0
{
    margin:0.0px 0.0px 13.0px 107.0px; text-align:left; font-weight:400; text-indent:-107.0px;
}
.Body-P-P1
{
    margin:0.0px 0.0px 13.0px 0.0px; text-align:center; font-weight:400; text-indent:0.0px;
}
.Body-code
{
    margin-left:10.0px;font-family:"Arial", sans-serif; color:#cfb53b; font-weight:600; font-size:18.0px; line-height:1.5em;
}
.Header-Main
{
    font-family:"Arial", sans-serif; color:#d9e027; font-size:32.0px; line-height:1.0em;
}
.Header-Sub
{
    font-family:"Arial Black", sans-serif; top:50px; color:#ffffff; font-size:27.0px; line-height:1.3em;
}
.Main-Title
{
   font-family:"Arial", sans-serif; color:#cfb53b; font-weight:bold; font-size:32.0px; margin:0px; text-align:center;
}
.Sub-Title
{
   font-family:"Arial", sans-serif; color:#cfb53b; font-weight:bold; font-size:18.0px; line-height:1.8em; text-decoration:underline; text-decoration-color:#cfb53b;
}
.Sub-Contact
{
   font-family:"Arial", sans-serif; color:#000000; font-weight:bold; font-size:18.0px; line-height:1.6em;
}
.Sub-Policy
{
   font-family:"Arial", sans-serif; color:#cfb53b; font-weight:bold; font-size:18.0px; line-height:1.0em; text-decoration-color:#cfb53b;
}
.Modal-Title
{
   font-family:"Arial", sans-serif; color:#000000; font-weight:bold; font-size:18.0px; line-height:2.2em;
}
.Caption
{
    font-family:"Arial", sans-serif; font-weight:700; color:#ff0000; font-size:16.0px; line-height:1.25em;
}
.Foot-1
{
    font-family:"Arial", sans-serif; font-weight:700; font-size:12.0px; color:#000000; line-height:1.0em;
}
.Foot-2
{
    font-family:"Arial", sans-serif; font-size:12.0px; color:#000000; line-height:1.0em;
}
.Body-F1
{
    font-family:"Arial", sans-serif; font-size:14.0px; color:#000000; line-height:1.5em;
}
.Body-Tract
{
    font-family:"Arial", sans-serif; font-weight:700; font-size:13.0px; color:#000000; line-height:1.23em;
}
.Body-C-C2
{
    font-family:"Arial", sans-serif; font-weight:700; font-size:13.0px; color:#000000; line-height:1.23em;
}
.Body-C-C3
{
    font-family:"Arial", sans-serif; font-weight:600; font-size:14.0px; line-height:1.25em;
}
.Body-C-C4
{
    font-family:"Arial", sans-serif; font-weight:700; font-size:18.0px; line-height:1.25em;
}
.Body-C-C5
{
    font-family:"Arial", sans-serif; font-size:16.0px; line-height:1.19em;
}
.Body-C-C6
{
    font-family:"Times New Roman", serif; font-size:16.0px; line-height:1.25em;
}
.style1 {
	font-size: 27px;
	color: #433831;
}
.style2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.style12 {
	font-size: 18px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #BDD73C;
	font-weight: bold;
}
.style13 {
	font-size: 14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style-special-meeting-heading {
	font-size: 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FF0000;
	font-weight: bold;
	line-height: 1;
}
.style131 {	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style121 {font-size: 18px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #BDD73C;
	font-weight: bold;
}
#contenttextgrow *:first-child  {
   margin-top: 0px;
}

#contenttextgrow *:last-child  {
   margin-bottom: 0px;
}

#contenttextgrow p  {
   font: 12px/14px Verdana, sans-serif;
   margin: 0px;
   text-align: left;
}

#contenttextgrow  {
   margin: 163px 54px 0px 55px;
   visibility: visible;
   padding: 0px;
}

#uplift  {
   position: absolute;
   width: 100%;
   z-index: 4;
}

#finalsite1  {
   margin: 0px auto;
   position: relative;
}

.parallax {
  background-image: url("../images/image_3_100.jpg");
  background-attachment: fixed;
  background-origin: border-box;
  background-position: center 50px;
  background-repeat: no-repeat;
  background-size: 100vw;
  background-color: transparent;
}
@media (max-width: 1200px) {.parallax {background-position:center 50px; background-repeat:no-repeat; background-size: cover;}}
@media (max-width: 820px) {.parallax {background-position:center 100px; background-repeat:repeat-y; background-size: 100vw;}}

.header {
  position:fixed;
  top: 0px;
  min-width:100%;
  height: 132px;
  border-radius: 0px 0px 15px 15px;
  background: #463b34;
  padding: 15px 0px 0px 15px; 
  z-index: 2;
}

.backdrop {background: url("../images/Backdrop.png") repeat center}

.bible_text {
  max-width: 70%;
  border: 4px solid;
  border-radius: 30px;
  margin: 132px auto 0px;
  padding: 10px;
}

.bible_text.blue {border-color:Blue; background:url("images/Blue_Text.png") repeat center}
.bible_text.brown {border-color:Brown; background:url("images/Brown_Text.png") repeat center}
.bible_text.chocolate {border-color:Chocolate; background:url("images/Chocolate_Text.png") repeat center}
.bible_text.burlywood {border-color:burlywood; background:url("images/Brown_Text.png") repeat center}
.bible_text.green {border-color:Green; background:url("images/Green_Text.png") repeat center}
.bible_text.gray {border-color:DarkGray; background:url("images/Grey_Text.png") repeat center}
.bible_text.orange {border-color:DarkOrange; background:url("images/Orange_Text.png") repeat center}
.bible_text.red {border-color:Red; background:url("images/Red_Text.png") repeat center}
.bible_text.salmon {border-color:Salmon; background:url("images/Salmon_Text.png") repeat center}
.bible_text.violet {border-color:DarkViolet; background:url("images/Violet_Text.png") repeat center}
.bible_text.yellow {border-color:GoldenRod; background:url("images/Yellow_Text.png") repeat center}

@media (max-width: 1200px) {.bible_text {max-width:calc(800px)}}
@media (max-width: 820px) {.bible_text {max-width:100%!important; border-width:0.5vw;} .Text-C {font-size:4vw; line-height:1.16em} .Body-C-C2 {font-size:2.0vw!important}}

.line {margin:10px 0 0; border-bottom:3px solid #cfb53b}

.leaflets {
  position: relative;
  max-width: 50%;
  margin-left:auto; margin-right:auto;
  margin-bottom: 40px;
  padding: 50px;
  border: 50px;
}

.Announcements {
  box-sizing: content-box;
  margin: 10px auto;
  position: relative;
  border: 8px double #00B400;
  max-width: 720px;
  min-height: 60px;
  border-radius: 40px;
  background: #ffffff;
  padding: 15px;
  text-align: center;
  float: center;
  color: #00B400;
}

.Hire {
  box-sizing: content-box;
  margin: 10px auto;
  position: relative;
  border: 1px solid #b8860b;
  max-width: 260px;
  border-radius: 8px;
  background: #ffffff;
  padding: 8px;
  text-align: center;
  float: center;
  color: #b8860b;
}

#spot {
  position: relative;
  left: 50%;
  top: -220px;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: #ffff00;
  opacity: 1.0;
  Z-index: 1; 
}

.button {
  border: 0.5px solid darkgray;
  border-radius: 12px;
  background-color: #eaeaea;
  color: white;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 2px 2px;
  cursor: pointer;
}

.button:hover {text-decoration:underline}

.button-day {
  border: 0.5px solid darkgray;
  border-radius: 50%;
  background-color: #d9e027;
  color: Gray;
  width: 40px;
  height: 40px;
  padding: 0px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 0px 0px;
}

table {
  margin: 20px auto;
  border-collapse: collapse;
  border-spacing: 0px;
}

a {text-decoration:none}

ol.john {background: #ffffff; padding: 20px 3px; margin:0% 2%; max-width: 800px; margin: auto}
ol.john li {background: #ffffff; padding: 3px 10px; margin-left: 35px;}

ol.directions {margin-left: 0px;}
ol.directions li {padding: 3px 10px;}

ul.children {background: #ffffff; padding: 20px 3px; margin:0% 2%; max-width: 800px; margin: auto; border-top: 3px solid #cfb53b; border-bottom: 3px solid #cfb53b}
ul.children li {background: #ffffff; padding: 3px 10px; margin-left: 25px}

ul.meetings {background: #ffffff; padding: 20px 3px; margin:0% 2%; max-width: 800px; margin: auto; border-top: 3px solid #cfb53b; border-bottom: 3px solid #cfb53b}
ul.meetings li {background: #ffffff; padding: 3px 10px; margin-left: 25px}

ul.contact {background: #ffffff; padding: 0px 10px; margin:0% 2%; max-width: 800px; margin: auto}
ul.contact li {background: #ffffff; padding: 3px 10px; margin-left: 20px}

ul.doctrine {background: #ffffff; padding: 0px 10px; margin:0% 2%; max-width: 800px; margin: auto}
ul.doctrine li {background: #ffffff; padding: 3px 5px; margin-left: 15px}

ul.policy {background: #ffffff; padding: 0px 10px; margin:0% 2%; max-width: 800px; margin: auto}
ul.policy li {background: #ffffff; padding: 3px 5px; margin-left: 15px}

/* ---------- Menu Responsive Layout ------------------------------------------------------------ */

ul.menu {
  list-style-type: none;
  position: fixed;
  max-width:80%;
  top: 96px;
  margin: 0;
  padding: 3px;
  overflow: auto;
  z-index: 2;
}

li {float: left;}

li.b {float: none;}

li a, .dropbtn {
  display: inline-block;
  background-color: #463b34;
  min-width: 150px;
  margin: 2px;
  border-radius: 12px;
  color: white;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {background-color: #d9e027;}

li.dropdown {display: inline-block;}

.dropdown-content {
  display: none;
  position: relative;
  background-color: /*transparent;*/ #463b34;
  width: 100%;
  margin: 0; padding: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.0);
  z-index: 1;
}

.dropdown-content a {
  display: none;
  color: white;
  padding: 10px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #d9e027;}

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

.dropdown-hall {
  display: none;
  position: relative;
  margin:0; padding:0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.row::after {content: ""; clear: both; display: table;}

[class*="col-"] {float: left; padding:1%;}

.dropdown_hall:hover .dropdown-hall {display: block; opacity:1.0}

.ver-dropbtn {display:inline-block; width:140px; margin:0px 0px; border-radius:12px; color:white; text-align:center; padding:0px 0px; text-decoration:none}

.hor-downloads {display:inline-block}
.ver-downloads {display:block}

.downloads-list {display:none; position:relative; background-color:#463b34; padding:1px 0px; border-radius:0px 0px 12px 12px; z-index:3}

.downloads-list a {background-color:#cfb53b; position:relative; color:white; padding:6px 10px; text-decoration:none; display:block}

.hor-downloads:hover .downloads-list {display:block}

.hbar{min-width:100%; list-style-type:none; position:fixed; top:90px; margin:0px; padding:3px; border:none; z-index:3}
.hbar-item {display:inline-block; background-color:#cfb53b; width:auto; margin:2px; border-radius:12px; padding:6px 10px; color:white; text-align:center; text-decoration:none}
.vbar{position:fixed; top:90px; margin:0px; width:160px; background-color:#463b34; padding:2px; border-radius:0px 0px 12px 12px; border:none; z-index:3}
.vbar-item{display:block; background-color:#cfb53b; min-width:80%; height: 30px; margin:0px; border-radius:12px; padding:0px 0px; text-align:center; white-space:normal; float:none; outline:0}
.vblock{min-width:80%; list-style-type:none; position:absolute; top:158px; border-radius:12px; margin:0px; padding:3px; z-index:3}
.vblock-item{display:block; width:138px!important; margin:0px 0px; padding:20px 10px; text-align:center; border:none; float:none; outline:0}

.button1 {width:150px; margin:2px 2px; background-color:#cfb53b; border-radius:12px; padding:6px 10px; color: white; text-decoration: none; border:none; cursor: pointer}
.button2 {width:150px; margin:2px 2px; background-color:#cfb53b; border-radius:12px; padding:8px 10px; color: white; text-decoration: none; border:none; cursor: pointer}
.button1:hover{background-color:#d9e027!important}
.button2:hover{background-color:#d9e027!important}
.right{float:right!important}
.hide{display:none!important}
.show{display:block!important}

.path {float:right!important; font-family:"Arial", sans-serif; color:#cfb53b; font-size:14.0px; line-height:1.0em; margin:15px 10px 0px 0px;}

@media (max-width:1000px){.hide-small{display:none!important}}
@media (max-width:1092px) and (min-width:1001px){.hide-medium{display:none!important}}
@media (min-width:1093px){.hide-large{display:none!important}}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 1200px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

.row {display:flex; flex-wrap:wrap; padding:15px 15px}

.para-title {display:block; background-color:white; flex-wrap:wrap; max-width:800px; margin:auto; border:0px solid red; text-align:center; padding: 15px 10px 0px}
.para-cen {display:block; background-color:white; max-width:800px; margin:auto; border:0px solid red; padding: 7.5px 10px}
.para-sub {display:block; background-color:white; flex-wrap:wrap; max-width:800px; margin:auto; border:0px solid red; padding: 7.5px 10px}
.para-form {display:block; background-color:white; flex-wrap:wrap; max-width:800px; margin:auto; border:4px solid #cfb53b; padding: 7.5px 17px}
.para-slide {position: relative; background-color:white; max-width:800px; margin:auto; padding:10px 10px}
.para-john {display:block; background-color:white; flex-wrap:wrap; max-width:800px; margin:auto; border:0px solid red; padding: 3px 10px}

/* Create four equal columns that sit next to each other */
.column {
  text-align: center;
  flex: 25%;
  column-gap: 80px;
  max-width: 200px;
  padding: 10px 10px;
}

.column img {
  margin-top: 0px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
  .column {
  flex: 50%;
  column-gap: 80px;
  width: 176px;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
  flex: 100%;
  column-gap: 80px;
  width: 176px;
  margin: auto;
 }
}

/* ---------- Footer ---------------------------------------------------------------------------- */

.footer {
  position: relative;
  width: 100%;
  min-height:65px;
  background: #cfb53b;
  margin-top: 0px;
  padding: 0px; 
  z-index: 1;
}

.para-footer {display:flex; background-color:transparent; flex-wrap:wrap; max-width:800px; margin:auto; border:0px solid red; padding: 2px 10px}

.boarder-footer {padding-left:20px; border-right:3px solid white}

.Foot-2:hover {text-decoration:underline}

@media (min-width: 801px) {.para-footer {flex:50%; margin:0px calc(50% - 400px)}}
@media (max-width: 800px) {.para-footer {flex:50%; margin:0px calc(50% - 200px)}}
@media (max-width: 501px) {.para-footer {flex:100%; max-width:200px!important; margin:auto}}

/* ---------- Responsive layout - Download Layout ----------------------------------------------- */

.flex-container {display:flex; flex-wrap:wrap; max-width:800px; margin:auto}
.flex-sub {width:176px; padding:12px; flex:25%; text-align:left}
.flex-pamphlet {width:176px; padding:0px 12px; flex:25%; text-align:left}
.flex-edge {position: relative; width:176px; top:-10px; border:2px solid white}
.flex-edge-a {position: relative; width:176px; top:-10px; border:2px solid Silver}
.flex-edge:hover {opacity:0.75; border:2px solid Orange!important}
.flex-edge-a:hover {opacity:0.75; border:2px solid Orange!important}

@media (min-width: 801px) {.flex-container {flex:50%; margin:0px calc(50% - 400px)}}
@media (max-width: 800px) {.flex-container {flex:50%; margin:0px calc(50% - 200px)}}
@media (max-width: 451px) {.flex-container {flex:50%; margin:0px calc(50% - 180px)} .flex-sub {width:164px!important; padding:8px} .flex-pamphlet {width:164px!important; padding:0px 8px} .flex-edge,.flex-edge-a {width:164px!important} .print {font-size:19px!important; left:134px!important}}
@media (max-width: 361px) {.flex-container {flex:100%; max-width:180px!important; margin:auto} .flex-sub {width:164px!important; padding:8px} .flex-pamphlet {width:164px!important; padding:0px 8px} .flex-edge,.flex-edge-a {width:164px!important} .print {font-size:19px!important; left:134px!important}}

.print {
  display: inline!important;
  font-size: 20px;
  color: #cfb53b;
  padding: 0px;
  background-color: White;
  position: relative;
  top: 18px;
  left: 146px;
  border-radius: 4px;
  padding: 2px;
  border: 1px solid #cfb53b;
  text-decoration: none;
  z-index: 1;
}
 
.print:hover {opacity:0.75; color: Orange; border:1px solid Orange!important}

.print-icon {
  font-size: 18px;
  color: #cfb53b;
  padding: 0px;
  background-color: White;
  border-radius: 4px;
  padding: 2px;
  border: 1px solid #cfb53b;
}
 
.print-icon:hover {opacity:0.75; color: Orange; border:1px solid Orange!important}

/* ---------- Image Gallery - Index ------------------------------------------------------------- */

img {
  vertical-align: middle;
}

/* Hide the images by default */
.mySlides {display: none;}

/* Add a pointer when hovering over the thumbnail images */
.cursor {cursor: pointer;}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 10px 15px;
  margin-top: -50px;
  color: white;
  font-weight: normal;
  font-size: 30px;
  user-select: none;
  -webkit-user-select: none;
}
.prev {left: 0; margin-left:10px; border-radius: 0 3px 3px 0;}

.next {right: 0; margin-right:10px; border-radius: 3px 0 0 3px;}

.prev:hover, .next:hover {background-color: rgba(0, 0, 0, 0.8);}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-image {
  text-align: center;
  background-color: #222;
  padding: 10px 12px;
  color: white;
}

.row-image:after {content: ""; display: table; clear: both;}

/* Four columns side by side */
.column-image {float: left; width: 25%;}

/* Add a transparency effect for thumnbail images */
.demo {opacity: 0.6;}

.active, .demo:hover {opacity: 1;}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* ---------- Responsive layout - Contact ------------------------------------------------------- */

.flex-contact {margin:auto; display:flex; flex-wrap:wrap; max-width:800px}
.mail {padding-left:20px; border-right:3px solid #cfb53b}
.tele {padding-left:20px}

@media (max-width: 600px) {.flex-contact {margin:0px 10px} .mail {border-right:hidden; border-bottom:3px solid #cfb53b; padding:8px 10px} .tele {padding-left:10px}}

input[type=text], select {
  width: 400px; max-width: 100%;
  padding: 8px 10px;
  margin: 0px;
  display: inline-block;
  border: 1px solid #cfb53b;
  border-radius: 4px;
  box-sizing: border-box;
  }
  
input[type=text]:focus {outline:none; border:3px solid #cfb53b}

textarea[type=text], select {
  min-width: 300px; width: 500px;  Max-width: 100%;
  min-height:200px;
  padding: 8px 10px;
  margin: 0px;
  display: inline-block;
  border: 1px solid #cfb53b;
  border-radius: 4px;
  box-sizing: border-box;}
  
textarea[type=text]:focus {outline:none; border:3px solid #cfb53b}

.error {color:#ff0000; font-size:14.0px; font-weight:bold}

#form-submit {
  display: block;
  min-width: 150px; width: 250px;
  font-size: 18px;
  border: 1px solid darkgray;
  background-color: WhiteSmoke;
  color: black;
  cursor: pointer;
  padding: 5px;
  border-radius: 10px;
  margin: 0px;
}

#form-submit:hover {opacity: 0.8; color: black; border: 3px solid #cfb53b; padding: 3px;}

.icon {
  font-size: 20px;
  padding: 8px;
  background: #cfb53b;
  color: white;
  width: 36px;
  height: 36px;
  text-align: center;
  border: 1px solid red;
  vertical-align: center;
}
  
/* ---------- Modal Definition for Incorrect/Correct Form Completion ---------------------------- */

/* The Modal (background) */
.modal-form {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 5; /* Sit on top */
  padding-top: calc(50vh - 105px);/* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0px;
  border: 1px solid #888;
  width: 40%;
  min-width: 400px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
 
.modal-animate {
-webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

@-webkit-keyframes animatetop {
  from {top:-400px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-400px; opacity:0}
  to {top:0; opacity:1}
}

.modal-table {margin:0px; width:100%; height:120px}

.button-modal {
  border-radius: 50%;
  background-color: white;
  width: 80px;
  height: 80px;
  padding: 0px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 50px;
  font-weight:bold;
  margin: 10px 10px;
}

.button-modal.cross {border:3px solid red; color:red}
.button-modal.tick {border:3px solid green; color:green}

/* The Close Button */
.close {
  border: 0px solid darkgray;
  color: white;
  float: right;
  font-size: 24px;
  font-weight: bold;
  margin: 5px 5px;
 }

.close.cross {background-color:red}
.close.tick {background-color:green}
	
.close:hover,
.close:focus {
  background-color: #fefefe;
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {padding:0px 0px 0px 16px; color:white}

.modal-header.cross {background-color:red}
.modal-header.tick {background-color:green}

.modal-footer {padding:2px 16px; color:white}

.modal-footer.cross {background-color:red}
.modal-footer.tick {background-color:green}

.modal-close {
  border: 0.5px solid darkgray;
  border-radius: 12px;
  background-color: #eaeaea;
  color: black;
  padding: 5px 15px;
  text-align: center;
  text-decoration:none;
  display: block;
  font-size: 14px;
  margin: 2px auto;
  cursor: pointer;
}

.modal-close:hover,
.modal-close:focus {
  background-color: #eed490;
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* ---------- Scroll Up Button ------------------------------------------------------------------ */

#scroll-up {
  display: none;
  position: fixed;
  transform: rotate(-90deg);
  bottom: 5px;
  right: 5px;
  z-index: 99;
  font-size: 30px;
  border: 1px solid grey;
  outline: none;
  background-color: #cfb53b;
  color: #d9e027;
  cursor: pointer;
  padding: 2px 10px;
  border-radius: 15px;
  -webkit-animation-name: animateright;
  -webkit-animation-duration: 1.0s;
  animation-name: animateright;
  animation-duration: 1.0s
}

#scroll-up:hover {background-color: #d9e027; color: #463b34;}

@media (max-width: 801px) {#scroll-up {font-size:4vw!important; border-radius: 2vw;}}
@media (max-width: 501px) {#scroll-up {font-size:22px!important; border-radius: 10px}}

/* ---------- Verse Tool Tip ---------------------------------------------------------------- */

.verse {position: relative; display: inline-block; color: blue;}

.verse .versetext {
  visibility: hidden;
  width: 160px;
  background-color: LightYellow;
  color: blue;
  font-size: 12px;
  text-align: left;
  line-height: 1.25em;
  border-radius: 4px;
  padding: 4px;
  position: absolute;
  z-index: 10;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
  opacity: 0;
  border: 1px solid blue;
  transition: opacity 0.3s;
}
.versetext b {color: red}

.verse .versetext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: blue transparent transparent transparent;
}

.verse:hover .versetext {visibility:visible; opacity:1}

 /* ---------------------------------------------------------------------------------------------- */