/*  Background color:       #3a4a58
    Title color:            #996633
    Text color:             #666666
    Text Dark color:        #333333
    Table Heading color:    #C4CDD6
    Table Alternate color:  #e5e8ed  */
/* background-color: #3a4a58;
   color: #8c8c8c; */

/* RGB Colors
0,0,0 = black
255,255,255 = white
*/

body {
  background-color: white;
  color: white;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding: 15px;
  margin: 0;
}
				/* Verse of day div */
.div-style-VoD {
  margin: auto;
  position: center;
  right: 0px;
  width: 300px;
  padding: 1px;
  border: 0px solid black;
  border-radius:30px; 		//rounded corners 
  background:none; 
  border-style:solid;
}

.p-style-VoD {
  display: grid;              
  margin-top: 0em;
  margin-bottom: 0em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-size: 1.3em;
  color: white;                      /* font color */
  background-color: #eff0f1;         /* p tag bg color */
  background: rgba(0,0,0,0.20);      /* transparency */
  font-weight: normal;
}

			       /* Paragraph */ 

.p-style-rv-2 {
  display: grid;              
  margin-top: 0em;
  margin-bottom: 0em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-size: 1.3em;
  color: white;                    /* font color */
  background-color: #eff0f1;       /* p tag bg color */
  background: rgba(0,0,0,0.75);    /* transparency */
  font-weight: normal;
}

.p-style-rv-1 {
  display: grid;              
  margin-top: 0em;
  margin-bottom: 0em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-size: 1.3em;
  color: white;                 /* font color */
  background-color: #eff0f1;     /* p tag bg color */
  background: rgba(0,0,0,0.25);    /* transparency */
  font-weight: normal;
}

.p-style-date1 {
  display: grid;              
  margin-top: 0em;
  margin-bottom: 0em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-size: 1.5em;
  color: black;                 /* font color */
  background-color: #eff0f1;     /* p tag bg color */
  background: rgba(0,255,255,0.25);    /* transparency */
  font-weight: normal;
}

.p-style-date2 {
  display: grid;              
  margin-top: 0em;
  margin-bottom: 0em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-size: 1.5em;
  color: black;                 /* font color */
  background-color: #eff0f1;     /* p tag bg color */
  background: rgba(0,255,255,0.25);    /* transparency */
  font-weight: bold;
}

.p-style-0 {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-size: 1.5em;
  color: black;
}

.p-style-1 {
  display: block;
  margin-top: 1em;
  margin-bottom: 0.35em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-size: 1.25em;
  color: black;
}

.p-style-2 {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0.4em;
  margin-right: 0.4em;
  text-align: left;
  font-size: 1.25em;
  color: black;
}

.p-style-3 {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 2.0em;
  margin-right: 0.5em;
  text-align: left;
  font-size: 1.25em;
  color: black;
}

.p-style-4 {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 2.0em;
  margin-right: 0.5em;
  text-align: center;
  font-size: 1.5em;
  color: black; 
}

.p-style-5 {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 2.0em;
  margin-right: 0.5em;
  text-align: left;
  font-size: 1.25em;
  color: black;
}

.p-style-6 {
  display: inline;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 2.0em;
  margin-right: 0.5em;
  text-align: left;
  font-size: 1.25em;
  color: black;
  text-align: center;
}

.p-style-7 {
  display: block;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-size: 1.25em;
  color: black;
}

			/* Styling for Div of Verses  */
.div-style-1 {
  position: left;
  right: 0px;
  width: 820px;
  padding: 1px;
  border: 2px solid #b30000;
  border-radius:30px; 
  background:none; 
  border-style:solid;
}
				/* Float RIGHT div */
.div-style-2 {
  float: right;
  position: right;
  right: 0px;
  width: 20vw;
  padding: 1px;
  border: 0px solid black;
  border-radius:30px; 		//rounded corners 
  background:none; 
  border-style:solid;
}
				/* Float LEFT div */
.div-style-3 {
  float: left;
  position: right;
  right: 0px;
  width: 20vw;
  padding: 1px;
  border: 0px solid black;
  border-radius:30px; 		//rounded corners 
  background:none; 
  border-style:solid;
}

/*                              headers      Font size was 3.5rem       h1 h2 h3 h4 */ 
.header-style {
  color: #B50D0D;
  text-align: center;
  font-weight: 600;
  font-size: 2.5em;
  margin-top: 10px;
  margin-bottom: 10px;
}

.header-style-2 {
  color: #B50D0D;
  text-align: center;
  font-weight: 400;
  font-size: 2.2em;
  margin-top: 10px;
  margin-bottom: 15px;
}

.tm-container {
  max-width: 55vw;
  margin-left: auto;
  margin-right: auto;
}

.tm-main-content { background-color: #ffffff; }

#fixed-size {
  border: 0px solid Blue;
  overflow: hidden;
  width: 55vw; 
  height: 170px;

}
#tm-intro-img {
  background-image: url(../img/SheepBanner9.jpg);  /* banner33.jpg */ 
  background-position: center;
  background-size: auto;    /* options: auto; cover; contain; */
  min-height: 170px;

}

#tm-outro-img {
  background-image: url(../img/Banner1.jpg);
  background-position: center;
  background-size: cover;
  min-height: 425px;
}

.tm-text-white { color: white; }

.tm-page-footer-container { text-align: center; }

.tm-page-header {
  display: inline-block;
  vertical-align: baseline;
  margin-top: 20px;
  margin-bottom: 35px;
  font-size: 2.1rem;
  font-weight: 400;
}

.tm-page-icon {
  display: inline-block;
  vertical-align: baseline;
  padding: 15px;
}





/*This table part is so I can see the
table border. Can erase when done.*/
table, th, td {
  border: 0px solid black;
  border-collapse: collapse;
}


table {
  width: 100%;
  border-spacing: 0;
}

td {
  text-align: center;
  padding: 10px 15px;
  color: black;
  font-size: 1.2em;
}

.tm-text-left { text-align: left; }

th {
  color: #333333;
  font-weight: 400;
  font-size: 1.5rem;
  padding-left: 15px;
  padding-right: 15px;
  text-align: center;
  padding: 10px 15px;
}

th.th-header-1 {
  color: Black;
  text-align: center;
  font-weight: 600;
  font-size: 1.5em;
  padding-left: 15px;
  padding-right: 15px;
  text-align: center;
  padding: 10px 15px;
}

td.redtext {
  color: red;
}

/* Grey Table Color  #e5e8ed */
tr:nth-child(odd) { background-color: rgba(220,220,220) }

/* Table Header Color */
tr.tm-tr-header {
  background-color: #c4cdd6;
  height: 50px;
}

.tm-tr-header {
  font-size: 1.5rem;
}

.tm-section {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 30px;
}

.tm-section-small {
  max-width: 490px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
}

p {
  font-size: 1rem;
  line-height: 1.7;
}

.tm-mb-0 { margin-bottom: 0; }
img { max-width: 100%; }
figure { margin: 0; }
figcaption { text-align: center; }

figcaption span {
  display: block;
  color: #333333;
  font-size: 18px;
}

.tm-item-name {
  margin-top: 20px;
  margin-bottom: 10px;
}

.tm-special-items {
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
}

.tm-special-item {
  padding-left: 15px;
  padding-right: 15px;
}

hr {
  width: 60%;
  border: 0.5px solid #ccc;
}

.tm-social-icons {
  text-align: center;
  margin-top: 30px;
}

.tm-social-icons i { font-size: 1.2rem; }
.tm-social-link-container { display: inline-block; }

.tm-social-link {
  color: white;
  background-color: #c5ced8;
  border-radius: 2px;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.tm-social-link:hover { background-color: #808e9e; }

.tm-contact-link {
  color: #333333;
  font-weight: 600;
  text-decoration: none;
}

a { transition: all 0.3s ease; }
.tm-contact-link:hover { color: #808e9e; }

.tm-footer-text {
  font-size: 0.9rem;
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
}

.tm-footer-link {
  color: #fff;
  text-decoration: none;
}

.tm-footer-link:hover { color: #c5ced8; }

@media (max-width: 550px) {
  .tm-special-item {
    padding-left: 10px;
    padding-right: 10px;
  }
  .tm-special-items {
    margin-left: -10px;
    margin-right: -10px;
  }
}

@media (max-width: 480px) {
  .tm-special-item {
    padding-left: 5px;
    padding-right: 5px;
  }
  .tm-special-items {
    margin-left: -5px;
    margin-right: -5px;
  }
}

@media (max-width: 430px) {
  .tm-responsive-table { overflow-x: auto; }
  table { width: auto; }
  .tm-special-items { flex-direction: column; }
  .tm-special-item { margin-bottom: 40px; }
  figcaption p {
    margin-bottom: 0;
    line-height: 1;
  }
}


/*Experimental Below*/
/* Deepest possible browser support code for CSS FONTS from:
https://css-tricks.com/snippets/css/using-font-face-in-css/

Helvetica
sans-serif */

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}
















/* Flash Card Styling */

<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-box {
  background-color: transparent;
  background-image: url(../img/flashcardbg9.jpg);
 #background-image: url(../img/outro.jpg);
  width: 300px;
  height: 210px;
  border: 4px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #9ECDFF;
  color: black;
}

.flip-box-back {
  background-color: #9EDEFF;
  color: Black;
  transform: rotateY(180deg);
}
</style>

/* Flash Card Styling */
/*https://www.w3schools.com/howto/howto_css_flip_box.asp*/





/* NOTES
Expressing sizes, such as margins and paddings,
in em means they are related to the font size,
and if the user has a big font (e.g., on a big screen)
or a small font (e.g., on a handheld device), 
the sizes will be in proportion. Declarations 
such as text-indent: 1.5em and margin: 1em are 
extremely common in CSS.

Font Size can use PX, EM or REM

px
Pixels dont resize very well with browser settings.

em
An em is equal to the computed font-size of that element’s parent.
For example, If there is a div element defined with font-size: 16px
then for that div and for its children 1em = 16px.

rem
rem values are relative to the root html element, 
not to the parent element.
If font-size of the root element is 16px then 1 rem = 16px for 
all elements. If font-size is not explicitly defined in root 
element then 1rem will be equal to the default font-size provided 
by the browser (usually 16px).

*/



/*
Original Colors From 
Tooplate 2118 Chilling Cafe
https://www.tooplate.com/view/2118-chilling-cafe
    Background color:       #3a4a58
    Title color:            #996633
    Text color:             #666666
    Text Dark color:        #333333
    Table Heading color:    #C4CDD6
    Table Alternate color:  #e5e8ed 
*/