/* CSS FOR ABOUT JESUS SECTION */

* {
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing: border-box;
}

/* DEFAULT PAGE LINK COLORS: */
a { text-decoration:none; }
a:link { color:#770000; }
a:visited { color:#90c; }
a:hover { color:#f90; }
a:active { color:#f00; }

body { 
margin:0px; 
background-color:#faf4de; 
background-image:url('Resources/watercolor-ivory.jpg');
background-attachment:fixed;
height:100%;
}

/* ==================================================== */
/* CONTAINER DIV: */
/* ==================================================== */

#container_div{
display:block;
border:0px solid dodgerblue;
position:absolute;
top:0px;
width:100%;
max-width:1300px;
min-width:350px;
height:100%;
margin:auto;
overflow:hidden;
}

/* ==================================================== */
/* ABOUT JESUS IMAGE: */
/* ==================================================== */

#jesus_image_container {
display:block;
border:0px solid limegreen;
position:relative;
top:0px;
width:100%;
max-width:1300px;
height:100%;
background-color:#555555;
overflow:hidden;
margin:auto;
}

#jesus_image {
display:block;
position:relative;
width:1300px;
height:1154.4px;
left:0px;
top:-94.2px;
margin:0px;
}

/* ==================================================== */
/* TOP BANNER: */
/* ==================================================== */

#top_banner {
position: fixed; 
text-align:center;
left:0px;
top:0px;
width:100%;
min-width:350px;
height:80px;
background-color: #5b1a1e;
background: -ms-linear-gradient(#4e0101, #5b1a1e, #4e0101);
background: -webkit-linear-gradient(#4e0101, #5b1a1e, #4e0101);
background: -o-linear-gradient(#4e0101, #5b1a1e, #4e0101);
background: -moz-linear-gradient(#4e0101, #5b1a1e, #4e0101);
background: linear-gradient(#4e0101, #5b1a1e, #4e0101);
-ms-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: -0px 5px 5px rgba(0, 0, 0, 0.5);
z-index:100;
display:block;
}

#dg_logo {
width:80px;
padding-top:12.5px;
padding-bottom:5px;
margin-right:5px;
}

#dg_name {
width:375px;
padding-bottom:13px;
}

#up_down_arrow {
position:fixed;
left:25px;
top:28px;
width:80px;
cursor:pointer;
z-index:110;
}

/* ==================================================== */
/* TOP LINKS PANEL: */
/* ==================================================== */

#top_links_panel { 
position:fixed;
left:0px;
top:65px;
height:34px;
width:100%;
min-width:350px;
background-color:#af7804;
padding-top:4px;

text-align:center;
font-family: 'Open Sans', 'Verdana Bold', sans-serif;
font-weight: 600; 
font-size: 18px;
line-height: 26px;
color:#ffffff;

-ms-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
-o-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
box-shadow: -0px 15px 15px rgba(0, 0, 0, 0.7);
-ms-transition-duration:0.4s;
-moz-transition-duration:0.4s;
-webkit-transition-duration:0.4s;
-o-transition-duration:0.4s;
transition-duration:0.4s;
display:block;
z-index:90;
}

a.top_links_colors:link { color:#ffff00; }
a.top_links_colors:visited { color:#ffcc00; }
a.top_links_colors:hover { color:#ffffff; }
a.top_links_colors:active { color:#ffff00; }

/* ==================================================== */
/* JESUS LINKS PANEL: */
/* ==================================================== */

#jesus_links_panel {
display:block;
position:relative;
left:0px;
top:0px;
width:320px;
height:100%;
background-color:#ffffff;
opacity: 0.75;
border-right-style: solid;
border-right-width: 5px;
border-right-color: #af7804; 
-moz-box-shadow: 0px 15px 15px rgba(0, 0, 0,0.7);
-webkit-box-shadow: 0px 15px 15px rgba(0, 0, 0, .7);
box-shadow: -0px 15px 15px rgba(0, 0, 0, .7);
padding-top:110px; 
padding-left:20px;
padding-bottom:40px; 
cursor:pointer;
-ms-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
z-index:50;
overflow-y:scroll; /* enable vertical scrolling */
-ms-overflow-style:none;  /* IE and Edge */
scrollbar-width:none;  /* Firefox */
}

#jesus_links_panel::-webkit-scrollbar {  /* Chrome, Safari and Opera */
display:none;
}

#left_right_arrow {
position:absolute;
width:30px;
left:275px;
top:50%;
cursor:pointer;
-ms-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
z-index:60;
}

#jesus_links_group_div {
display:block;
border:0px solid green;
width:260px;
}

.jesus_links_head {
font-family: 'Merriweather', 'Clarendon', serif;
font-weight: 700; 
font-size: 19px;
line-height: 16px;
padding-top:8px;
text-align:left;
color:#000000
}

.jesus_links_list { 
font-family: 'Merriweather', 'Clarendon', serif;
font-weight: 400; 
font-size: 18px;
line-height: 40px;
color:#333333;
text-align:left;
}

/* highlight the link pointing to the current page */
.jesus_links_list_current_page { 
color:#5b1a1e; 
background-color:#dddddd;
}

/* highlight the link you hover over */
.jesus_links_list a:hover { 
color:#eeeeee; 
background-color:#444444; 
}

/* ==================================================== */
/* TEXT LAYER SECTION: */
/* ==================================================== */

#text_layer_div {
display:block;
border:0px solid LimeGreen;
position:absolute;
width:1256px;
height:100%;
left:44px;
top:0px;
padding-top:200px;
padding-left:30px;
padding-right:25px;
padding-bottom:100px;
transition-duration:0.4s;
-ms-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
z-index:30;
scroll-behavior:smooth;
overflow:auto;
}


/* these spacers are needed for all pages */
#all_pages_top_spacer_div {
border:0px solid orange;
width:100%;
height:55%;
}

#all_pages_bottom_spacer_div {
border:0px solid red;
width:100%;
height:90%;
}

.jesus_headline {
font-family: 'Merriweather', 'Clarendon', serif;
font-weight: 700; 
font-size: 40px;
line-height:46px;
color:white;
text-align:left;
}

.jesus_subhead {
font-family:'Merriweather', 'Clarendon', serif;
font-weight:700; 
font-size:26px;
line-height:30px;
color:white;
text-align:left;
}

.jesus_body_text {
font-family:'Open Sans', 'Verdana', sans-serif;
font-weight:400;
font-size:20px;
line-height:32px;
color:white;
text-align:left;
-webkit-text-size-adjust: 100%;
}

.jesus_body_text_blue_italic {
font-family: 'Open Sans', 'Verdana', sans-serif; 
color:#d0f3fd;
font-weight:400;
font-size:20px;
font-style:italic;
-webkit-text-size-adjust: 100%;
}

.jesus_body_text_gold_bold {
font-family: 'Open Sans', 'Verdana', sans-serif; 
color:#f5e5bc;
font-weight:700;
font-size:20px;
-webkit-text-size-adjust: 100%;
}

.jesus_body_text_red_bold {
font-family: 'Open Sans', 'Verdana', sans-serif; 
color:#fd7140;
font-weight:700;
font-size:20px;
-webkit-text-size-adjust: 100%;
}

.jesus_body_text a:link { color:#f5e5bc; }
.jesus_body_text a:visited { color:#f5e5bc; }
.jesus_body_text a:hover { color:#e4ba4e; }
.jesus_body_text a:active { color:#ffff00; }

.niv_copyright_notice {
font-family: 'Open Sans', 'Verdana', sans-serif; 
font-weight: 400; 
font-size: 18px;
line-height: 26px;
color:white;
text-align:left;
margin:0px 15px;
-webkit-text-size-adjust: 100%;
}

/* ==================================================== */
/* TO TOP BUTTON: */
/* ==================================================== */

#to_top_button {
opacity:0.0;
position:absolute;
border: 8px solid #af7804;
border-radius:50%;
width:70px;
height:70px;
bottom:10px;
right:30px;
background-color: #5b1a1e;
color:#af7804;
text-align:center;
font-family: 'Merriweather', 'Clarendon', serif;
font-weight: 700; 
font-size: 18px;
line-height:18px;
padding-top: 9px;
-ms-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
-o-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
box-shadow: -0px 15px 15px rgba(0, 0, 0, 0.7);
cursor:pointer;
transition-duration:1.0s;
-ms-transition-duration: 1.0s;
-moz-transition-duration: 1.0s;
-webkit-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
z-index:40;
}

#to_top_button:hover {
color:yellow;
}

/* ==================================================== */
/* FEEDBACK WINDOW:*/
/* ==================================================== */

#feedback_window {
position:fixed;
display:none; /* Hidden by default */
width:50%;
height:50%;
top:25%;
left:25%;
text-align:center;
padding:20px 20px;
background-color:rgba(255,255,0,0.9); /* Yellow background with opacity */
z-index:200;
cursor:pointer;
}

/* ==================================================== */
/* MEDIA QUERIES: */
/* ==================================================== */

@media screen and (max-width:1100px)
{
	#top_banner { height:80px; }
	#dg_name { width:375px; }
	#dg_logo { width:80px; }
	#up_down_arrow { top:28px; }
}

@media screen and (max-width:900px)
{
	#top_banner { height:65px; }
	#dg_name { width:325px; padding-top:16px; }
	#dg_logo { width:65px; padding-top:0px; padding-bottom:9px; }
	#up_down_arrow { top:22px; width:75px; }
	#top_links_panel { top:65px; }
	.jesus_headline { font-size: 36px; line-height:40px; }
}

@media screen and (max-width:800px)
{
	#up_down_arrow { top:22px; width:70px; }
	.jesus_headline { font-size: 36px; line-height:40px; }
}

@media screen and (max-width:750px)
{
	.jesus_headline { font-size: 32px; line-height:36px; }
}

@media screen and (max-width:700px)
{
	#dg_logo { width:62px; padding-top:0px; padding-bottom:9px; margin-left: 30px; }
}

@media screen and (max-width:625px)
{
	#dg_name { width:300px; padding-top:18px; }
	#dg_logo { width:60px; padding-top:0px; padding-bottom:9px; margin-left: 50px; }
}

@media screen and (max-width:550px)
{
	#dg_name { width:275px; padding-top:18px; }
	#dg_logo { width:57px; padding-bottom:8px; margin-left:60px; }
	.jesus_headline { font-size: 30px; line-height:38px; }
}

@media screen and (max-width:525px)
{
	#top_links_panel { height:62px; }
	#dg_logo { padding-bottom:8px; margin-left:80px; }
}

@media screen and (max-width:500px)
{
	#dg_name { width:270px; padding-top:20px; }
	#dg_logo { margin-left:90px; }
}

@media screen and (max-width:480px)
{
	#dg_name { width:270px; margin-left:80px; }
	#dg_logo { display:none;; }
}

@media screen and (max-width:450px)
{
	#dg_name { width:270px; padding-top:20px; margin-left: 85px; }
}

@media screen and (max-width:400px)
{
	#up_down_arrow { width:60px; top:24px; left:16px; }
	#dg_name { width:250px; padding-top:20px; margin-left: 80px; }
}

@media screen and (max-width:360px)
{
	#up_down_arrow { top:24px; width:55px; left:16px; }
	#dg_name { width:225px; padding-top:22px; margin-left: 70px; }
}