/*
   Filename:       nice_stories.css
   Author:         John G. (Skip) Todora
   Start Date:     January 28, 2023
   Website:        jtodora.com
*/


body {
   font-family: verdana, arial, sans-serif;

}

.bg-grad {
   background-color: #E5E5E5;
   background-image: linear-gradient(#E5E5E5, #66C4FF);  
}  /* #1E90FF #1EB3FF #66C4FF */

h1 {
	color: rgb(24,74,122);
	text-align: center;
	max-width: 100%;
	height: auto;
	padding-bottom: 30px;
	padding-top: 30px;
}

h2 {
   color: rgb(24,75,122);
   text-align: center;
   height: auto;
   padding-bottom: 30px;
   padding-top: 30px;
}

.piccenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 60%;
	height: auto;
	padding-top: 20px;
}

.center {
	text-align: center;
	list-style-position: inside;
	max-width: 50%;
	height: auto;
	padding-bottom: 30px;
    padding-top: 10px;
    margin: auto;
}

.redirect-text {
   text-align: center;
   font-weight: bold;
}

.toppadding10 {
	padding-top: 10px;
}

.toppadding50 {
	padding-top: 50px;
}

.addrtext {
	text-align: center;
	font-style: italic;
	padding-top: 100px;
}

.pictures-menu {
	max-width: 920px;
	margin: auto;
	padding-top: 5px;
	padding-right: 50px;
	padding-left: 50px;
}

.thumbnail-left {
	float: left;
	max-width: 100%;
	width: auto; 
	height: auto;
	padding: 10px; 
}

.thumbnail-cap-left {
	text-align: left;
}

.thumbnail-right {
	max-width: 100%;
	width: auto; 
	height: auto;
	padding: 5px;
}

.thumbnail-center {
	text-align: center;
	max-width: 100%;
	width: auto; 
	height: auto;
	padding: 10px; 
}

.pic-cap-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}

#underconstruction-left {
	max-width: 50%;
	height: auto;
	float: left;
}

#underconstruction-right {
	max-width: 50%;
	height: auto;
	float: right;
}

#underconstruction-center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 50%;
	height: auto;
}

.clearfix {
	clear: both;
	padding-bottom: 100px;
}

/* SOCIAL MEDIA ICONS */
.social-media-menu {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	max-width: 850px;
	margin: auto;
	padding-top: 80px;
}

.center-h {
	display: flex;
	justify-content: center;
}

.center-v {
	display: flex;
	align-items: center;
}

.h-150 {
	height: 150px;
}


.menu-bar {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 800px;
	margin: auto;
	padding-top: 25px;
    padding-bottom: 30px;
}

.menu-bar text-padding {
	padding-bottom: 100px;
}

.social-media-menu icon-padding {
	padding-left: 25px;
	padding-right: 25px;
}

.hit-counter {
	text-align: right;
	list-style-position: inside;
	max-width: 100%;
	height: auto;
}

.redirect-link {
	text-align: center;
	list-style-position: inside;
	margin: auto;
	max-width: 80%;
	height: auto;
	padding-bottom: 30px;
	font-weight: bold;
	font-size: 20px;
}

table {
	margin-left: auto;
	margin-right: auto;
	width: 75%;
}

tr, th {
	text-align: center;
}

.center-no-padding {
	max-width: 950px;
	color: green;
	font-weight: bold;
	margin: auto;
}

.horiz-line {
     border: 1px solid black;
     width: 80%;
}

/* WRAPPING SCROLL WITHOUT MARQUEE TAG */
.scroll-container {
   overflow: hidden;
   width: 1000px;
   margin: auto;
}

.scroll-text {
   transform: translateX(100%);
   font-size: 25px;
   color: black;
   animation: my-animation 20s linear infinite;
   white-space: nowrap;
}

.scroll-text-02 {
   transform: translateX(100%);
   font-size: 25px;
   color: black;
   animation: my-animation-a 20s linear infinite;
   white-space: nowrap;
}

@keyframes my-animation {
   /* Adjust the negative value to control the length of the scroll.
      Adjust by approximately the number number of characters + 17. 
	  Example: This text has 127 characters; therefore, 
	  127 + 17 = 144, or -144% */
   0% {
      transform: translateX(100%);
   }
   100% {
      transform: translateX(-144%);
   }
}

@keyframes my-animation-a {
   /* Adjust the negative value to control the length of the scroll.
      Adjust by approximately the number number of characters + 17. 
	  Example: This text has 127 characters; therefore, 
	  179 + 17 = 196, or -196% */
   0% {
      transform: translateX(100%);
   }
   100% {
      transform: translateX(-196%);
   }
}

/* END WRAPPING SCROLL WITHOUT MARQUEE TAG */



/* TWO COLUMN DISPLAY */
#col-container {
   width: 50%;
   margin: auto;
   padding-top: 25px;
   padding-bottom: 25px;
}

#col-content {
   float: left;
   width: 50%;
   padding-right: 30px;
   font-weight: bold;
}

*col-content-right {
   float: right;
   width: 50%;
   padding-left: 30px;
}

.bibleverse {
	display: flex;
	margin: auto;
	padding: 10px;
	font-weight: bold;
	border-style: ridge;
	border-width: 5px;
	border-color: #4C1CA0;
	box-sizing: border-box;
	background-color: #FAEBD7;
}

.bible-pic {
	width: 7%;
}

.read-everyday {
   font-size: 1.5em;
   font-weight: bold;
   color: red;
}

.align-read-everyday {
   padding-top: 25px;
   position: relative;
   text-align: center;
   max-width: 80%;
   margin: auto;
}

.red-font {
	color: red;
	font-style: italic;
}
/* END TWO COLUMN DISPLAY */

.center-text-only {
   text-align: center;
}

/* TILE MENU */
.tile-menu-container {
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   max-width: 850px;
   margin: auto;
   padding-top: 20px;
   padding-bottom: 60px;
}

.tile-menu-left {
   width: 25%;
   float: left;
   text-align: center;
}

.tile-menu-left-center {
   width: 25%;
   float: left;
   text-align: center;
}

.tile-menu-right-center {
   width: 25%;
   float: left;
   text-align: center;
}

.tile-menu-right {
   width: 25%;
   float: left;
   text-align: center;
}

/* TILE MENU ROW 01 */
.tile-menu-left-img-01 {
   width: 60%;
}

.tile-menu-left-center-img-01 {
   width: 100%;
}

.tile-menu-right-center-img-01 {
   width: 85%;
}

.tile-menu-right-img-01 {
   width: 75%;
}

/* TILE MENU ROW 02 */
.tile-menu-left-img-02 {
   width: 60%;
}

.tile-menu-left-center-img-02 {
   width: 75%;
}

.tile-menu-right-center-img-02 {
   width: 75%;
}

.tile-menu-right-img-02 {
   width: 50%;
}

/* TILE MENU ROW 03 */
.tile-menu-left-img-03 {
   width: 70%;
}

.tile-menu-left-center-img-03 {
   width: 80%;
}

.tile-menu-right-center-img-03 {
   width: 80%;
}

.tile-menu-right-img-03 {
   width: 80%;
}

/* TITLE MENU ROW 04 */
.tile-menu-left-img-04 {
   width: 65%;
}

.tile-menu-left-center-img-04 {
   width: 85%;
}

.tile-menu-right-center-img-04 {
   width: 70%;
}

.tile-menu-right-img-04 {
   width: 70%;
}

/* VALIDATION IMAGES CSS & HTML */
.validation-imgs-container {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	max-width: 15%;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
 }
 
 .validation-img-left {
	float: left;
	width: 50%;
 }
 
 .validation-img-right {
	float: left;
	width: 50%;
 }
 /* END VALIDATION IMAGES CSS & HTML */