* {
  box-sizing: border-box;
}
/* unvisited link */
a:link {
  color: brown;
}

/* visited link */
a:visited {
  color: #993366;
}

/* mouse over link */
a:hover {
  color: #295b7b;
}

/* selected link */
a:active {
  color: #295b7b;
}
html, body  {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  font-size: 100%;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-family: 'Palatino', 'Palatino', 'Linotype Palatino', 'LT STD', 'Book Antiqua','Georgia',serif; 
}
.hidden-scrollbar {
  overflow: hidden; /* Hides the scrollbar */
  width: 100%; /* Set your desired width */
  height: 300px; /* Set your desired height */
  position: relative; /* Required for positioning */
}
  
.scrollable-content {
  overflow-y: scroll; /* Allows vertical scrolling */
  height: 100%; /* Full height of the iframe */
  padding-right: 15px; /* Space for scrollbar */
  box-sizing: content-box; /* Prevents padding from affecting width */
}
.column {
  float: left;
  width: 50%;
  height: auto;
  padding: 70px auto;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.mvds   {
  margin: 0 auto;
  width: 100%;
  background-color: #ccc9ad;
  background-image: url(../images/beigeArtifact.jpg);
  background-repeat: repeat-x;
  background-size: cover;
}
.containerMain  {
display: block;
margin: 0;
padding: 0;
background-image: url('../images/bamSky.jpg');
background-repeat: no-repeat;
background-size: cover;
height: auto;
}

.aerial { 
  font-family: 'Arial Black', 'Arial Bold', 'Gadget', sans-serif
}
p   {
font-family: 'Palatino', 'Palatino', 'Linotype Palatino', 'LT STD', 'Book Antiqua','Georgia',serif; 
  font-size: 24px;
  text-align: left;
  line-height: 42px;
  color: #8a7c7c;
}
hr.rule {
border-top: 0.5px solid brown;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #777;
margin: 1em 0;
padding: 0;
}
h3.experience {
margin: 0 auto;
max-width: 1920px;
text-align: center;
padding-top: 150px;
color: white;
letter-spacing: 1px;
font-size: 1.2em;
line-height: 1.5em;
font-family: 'Arial', Gadget, sans-serif;
font-weight: bold;
font-style: normal;
padding-left: 50px;
padding-right: 50px;
}
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
h1.bam      {
  position: relative;
  top: 5px;
  font-size: 520px;
  line-height: 400px;
  letter-spacing: -10px;
  margin: 0 auto;
  max-width: 1920px;
  font-family: 'Arial Black', 'Roboto', sans-serif;
  color: #295b7b;
  text-align: center;
  margin-top: 100px;
  letter-spacing: -20px;
  font-weight: 900;
    
}
.ios-device {
  border-bottom: #295b7b 10px solid;
}

.slide-in {
opacity: 0; /* Start hidden */
transform: translateX(-100%); /* Start from the left */
animation: slideIn 2s forwards; /* Apply animation */
}

/* Keyframes for the slide-in animation */
@keyframes slideIn {
to {
    opacity: 1; /* Fade in */
    transform: translateX(0); /* Move to original position */
}
}



.animated-header2 {
  animation: slideIn 2s ease-in-out forwards;
}
.animated-header3 {
  animation: slideIn 3s ease-in-out forwards;
}

/* Keyframes for the sliding animation */
@keyframes slideIn {
  from {
      transform: translateY(-100%);
      opacity: 0;
  }
  to {
      transform: translateY(0);
      opacity: 1;
  }
}
.bornagain  {
position: relative;
margin: 0 auto;
top: -110px;
max-width: 1920px;
width: 100%;
text-align: center;
color: white;
font-size: 1100%;
line-height: 0;
font-family: 'palatino';
font-weight: bolder;
text-shadow: 0.5px 1px 2px black;
z-index: 2;
letter-spacing: -7px;
}
.movement   { 
position: relative;
margin: 0 auto;
top: -10px;
width: 100%;
color: white;
padding: 7px;
font-family: 'palatino';
font-weight: normal;
font-size: 50px;
line-height: 50px;
text-align: center;
background-color: #295b7b;
z-index: 1;
letter-spacing: 50px;
padding-left: 50px;
}
.mvds p  {
margin: 0 auto;
max-width: 1880px;
font-size: 2em;
line-height: 2.5em;
padding: 90px 70px;
}
/* Clear floats after the columns */
.row1:after {
content: "";
display: table;
clear: both;
}
.row1   {
margin: 0 auto;
max-width: 1800px;
padding: 0 30px; 
}
.column1 h2 {
margin-bottom: 30px;
text-align: left;
font-size: 2em;
line-height: 2em;
font-family: 'palatino bold';
font-weight: bolder;
line-height: 28px;
color: #295b7b;
font-weight: 900;
}
/* Create three equal columns that floats next to each other */
.column1 {
margin-top: 20px;
float: left;
width: 30.00%;
margin-right: 4.50%;
margin-bottom: 90px;
}

.column1 p  {
font-size: .5em;
margin-top: 50px;
}
.column1:last-child   {
margin-right: 0;
}
.good       {
font-size: 500%;
  color: rgb(110, 29, 29);
  font-family: 'palatino';
}
article  {
margin: 0 auto;
width: 100%;
background-image: url(../images/blueArtifact.jpg);
background-repeat: repeat-x;
background-color: black;
height: auto;
padding:55px;

}
article  p {
margin: 0 auto;
padding: 20px 55px;
border: solid 1px;
border: solid 1 antiquewhite;
font-size: 2em;
max-width: 1800px;
color: white;
line-height: 2.5em;
background-color: #5f7f94;
}  
article h4  {   
margin: 0 auto;
max-width: 1500px;
padding: 55px 10px;
color: white;
font-weight: normal;
font-size: 22px;
line-height: 40px;
border: none;
text-align: left;
}
div.navigate  {
  margin: 0 auto; 
  padding: 0 60px; 
  /*border: solid 0.5px rgba(255, 255, 255, 0.5);*/
  background-color: brown;
}
.titlePage      {
  font-size: 36px; 
  color: white;
  text-align: left;
  font-weight: bold;
  line-height: 38px;
  padding: 15px 0 15px 0;
}

@media screen and (min-width: 1755px)  and (max-width: 2546px)   {
h1.bam  {
  font-size: 520px;
  line-height:410px;
}
.bornagain  {
  font-size: 170px;
  top: -110px;
}
}
@media screen and (min-width: 1314px) and (max-width: 1754px) {
h1.bam  {
font-size: 480px;
  line-height:370px;
} 
.bornagain  {
  font-size: 1000%;
  top: -135px;
}

}
@media screen and (min-width: 1282px) and (max-width: 1313px) {
h1.bam  {
font-size: 440px;
line-height:340px;
} 
.bornagain  {
font-size: 900%;
top: -156px;
}
}
@media screen and (max-width: 1200px) {
.column1 {
  width: 100%;
  float: none;
  padding-left: 60px;
  padding-right: 35px; 
}
.column1:last-child {
  padding-bottom: 40px;
}
.column1:first-child{
  padding-top: 40px;
}
}
@media screen and (min-width: 1140px) and (max-width: 1281px) {
h1.bam  {
font-size: 410px;
line-height:330px;
} 
.bornagain  {
font-size: 800%;
top: -163px;

}
.movement   { 
padding: 7px;
font-size: 42px;
line-height: 50px;
letter-spacing: 50px;
padding-left: 69px;
}
.mvds p  {
font-size: 1.8em;
line-height: 1.8em;
padding: 60px 120px 60px 120px;
}
}
@media screen and (min-width: 1000px) and (max-width: 1139px) {
h1.bam  {
font-size: 350px;
line-height:270px;
padding-right: 40px;
} 
.bornagain  {
font-size: 650%;
top: -203px;
}
.movement   { 
padding: 7px;
font-size: 32px;
line-height: 50px;
letter-spacing: 40px;
padding-left: 55px;
}
.mvds p  {
font-size: 1.8em;
line-height: 1.8em;
padding: 60px 120px 60px 120px;
}
.column1 {
width: 100%;
float: none;
padding-left: 72px;
padding-right: 35px; 
}
.column1:last-child {
padding-bottom: 30px;
}
.column1:first-child{
padding-top: 30px;
}
}
@media screen and (min-width: 800px) and (max-width: 999px) {
h3.experience {
  font-size: 0.9em;
  line-height: 1.5em;
}
h1.bam  {
font-size: 265px;
line-height:200px;
padding-right: 40px;
letter-spacing: -20px;
} 
.bornagain  {
font-size: 550%;
top: -261px;
letter-spacing: -3px;
}
.movement   { 
font-size: 32px;
line-height: 40px;
letter-spacing: 30px;
padding-left: 50px;
}
.mvds   {
  background-image: none;
}
.mvds p  {
font-size: 1.8em;
line-height: 1.8em;
padding: 60px 120px 60px 120px;
}
}
@media screen and (min-width: 600px) and (max-width: 799px) {
h3.experience {
  font-size: 16px;
  line-height: 1.5em;
  text-align: center;
}
h1.bam  {
  font-size: 220px;
  line-height:180px;
  letter-spacing: 0;
}
.bornagain  {
  font-size: 550%;
  top: -280px;
  letter-spacing: -3px;
}
.movement   { 
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 30px;
  padding-left: 40px;
}
.mvds   {
  background-image: none;
}
.mvds p  {
  font-size: 1.8em;
  line-height: 1.8em;
  padding: 60px 70px 60px 70px;
}
.column1 {
  padding-left: 10px;
  padding-right: 10px; 
}
} 
@media screen and (min-width: 544px) and (max-width: 599px) {
h3.experience {
  font-size: 16px;
  line-height: 1.5em;
  text-align: center;
  padding-left: 90px;
  padding-right: 90px;
}
h1.bam  {
  font-size: 200px;
  line-height:175px;
  letter-spacing: 0;
}
.bornagain  {
  font-size: 450%;
  top: -284px;
  letter-spacing: -3px;
}
.movement   { 
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 20px;
  padding-left: 30px;
}
.mvds   {
  background-image: none;
}
.mvds p  {
  font-size: 1.8em;
  line-height: 1.8em;
  padding: 60px 50px 60px 50px;
}
.column1 {
  padding-left: 10px;
  padding-right: 10px; 
}
.good       {
  font-size: 400%;
}
article  p {
  padding: 20px 45px;
  font-size: 1.8em;
  line-height: 2em;
}
.row1   {
  margin: 0 auto;
  max-width: 1800px;
  padding: 0 10px; 
} 
} 
@media screen and (min-width: 460px) and (max-width: 543px) {
h3.experience {
  font-size: 16px;
  line-height: 1.5em;
  text-align: center;
  padding-left: 90px;
  padding-right: 90px;
}
h1.bam  {
  font-size: 180px;
  line-height:150px;
  letter-spacing: 0;
}
.bornagain  {
  font-size: 410%;
  top: -300px;
  letter-spacing: -3px;
}
.movement   { 
  font-size: 28px;
  line-height: 30px;
  letter-spacing: 20px;
  padding-left: 30px;
}
.mvds   {
  background-image: none;
}
.mvds p  {
  font-size: 1.8em;
  line-height: 1.8em;
  padding: 60px 50px 60px 50px;
}
.column1 {
  padding-left: 10px;
  padding-right: 10px; 
}
.good       {
  font-size: 400%;
}
article  p {
  padding: 20px 30px;
  font-size: 1.8em;
  line-height: 1.8em;
} 
.row1   {
  margin: 0 auto;
  max-width: 1800px;
  padding: 0 10px; 
}
article h4  {   
  font-weight: normal;
  font-size: 22px;
  line-height: 45px;
}
}
@media screen and (min-width: 401px) and (max-width: 460px) {
h3.experience {
  font-size: 16px;
  line-height: 1.5em;
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
}
h1.bam  {
  font-size: 160px;
  line-height:140px;
  letter-spacing: 0;
}
.bornagain  {
  font-size: 370%;
  top: -310px;
  letter-spacing: -3px;
}
.movement   { 
  font-size: 24px;
  line-height: 30px;
  padding: 1px;
  letter-spacing: 15px;
  padding-left: 25px;
}
.mvds   {
  background-image: none;
}
.mvds p  {
  font-size: 1.8em;
  line-height: 1.8em;
  padding: 60px 50px 60px 50px;
}
.column1 {
  padding-left: 10px;
  padding-right: 10px; 
}
.good       {
  font-size: 350%;
}
article  p {
  padding: 20px 30px;
  font-size: 1.5em;
  line-height: 1.6em;
} 
.row1   {
  margin: 0 auto;
  max-width: 1800px;
  padding: 0 10px; 
}
article h4  {   
  font-size: 22px;
  line-height: 45px;
}
}
@media screen and (min-width: 350px) and (max-width: 400px) {
h3.experience {
  font-size: 16px;
  line-height: 1.5em;
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
}
h1.bam  {
  font-size: 130px;
  line-height:120px;
  letter-spacing: 0;
  margin-top: 55px;
}
.bornagain  {
  font-size: 300%;
  top: -330px;
  letter-spacing: -3px;
}
.movement   { 
  font-size: 18px;
  line-height: 30px;
  padding: 1px;
  letter-spacing: 20px;
  padding-left: 25px;
}
.mvds   {
  background-image: none;
}
.mvds p  {
  font-size: 1.5em;
  line-height: 1.6em;
  padding: 60px 30px 60px 45px;
}
.column1 {
  padding-left: 0;
  padding-right: 0; 
}
.row1   {
  margin: 0 auto;
  max-width: 1800px;
  padding: 0 10px; 
}
.good       {
  font-size: 300%;
}
article  p {
  padding: 20px 25px;
  font-size: 1.3em;
  line-height: 2em;
}
article h4  {   
 
  font-size: 22px;
  line-height: 35px;
} 
}
@media screen and (min-width: 270px) and (max-width: 349px) {
h3.experience {
  font-size: 12px;
  line-height: 1.5em;
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
}
h1.bam  {
  font-size: 90px;
  line-height:100px;
  letter-spacing: 0;
  margin-top: 50px;
}
.bornagain  {
  font-size: 200%;
  top: -340px;
  letter-spacing: -3px;
}
.movement   { 
  font-size: 14px;
  line-height: 30px;
  padding: 1px;
  letter-spacing: 10px;
 
}
.mvds   {
  background-image: none;
}
.mvds p  {
  font-size: 1.5em;
  line-height: 1.6em;
  padding: 30px;
}
.column1 {
  padding-left: 0;
  padding-right: 0; 
}
.row1   {
  margin: 0 auto;
  max-width: 1800px;
  padding: 0; 
}
.good       {
  font-size: 200%;
}
article  p {
  padding: 20px 10px;
  font-size: 1.3em;
  line-height: 2em;
}
article h4  {   
  font-size: 22px;
  line-height: 35px;
} 
}
@media screen and (min-width: 220px) and (max-width: 269px) {
  h3.experience {
    font-size: 10px;
    line-height: 1.5em;
    text-align: center;
    padding-left: 30px;
    padding-right: 30px;
  }
  h1.bam  {
    font-size: 80px;
    line-height:95px;
    letter-spacing: 0;
    margin-top: 50px;
  }
  .bornagain  {
    font-size: 185%;
    top: -345px;
    letter-spacing: -1px;
  }
  .movement   { 
    font-size: 12px;
    line-height: 30px;
    padding: 2px;
    letter-spacing: 10px;
  }
  .mvds   {
    background-image: none;
  }
  .mvds p  {
    font-size: 1.2em;
    line-height: 1.6em;
    padding: 30px;
  }
  .bodytext   {
    padding: 10px;
    font-size: medium;
  }
  .column1 {
    padding-left: 0;
    padding-right: 0; 
  }
  .row1   {
    margin: 0 auto;
    max-width: 1800px;
    padding: 0; 
  }
  .good       {
    font-size: 200%;
  }
  article   {
    padding: 10px;
  }
  article  p {
    padding: 20px 10px;
    font-size: 1.3em;
    line-height: 2em;
  }
  article h4  {   
    font-size: 22px;
    line-height: 35px;
  } 
  }
  

.bcv    {
font-weight: bolder;
font-style: normal;
color: black;
}
.divide   {
color: rgb(98, 25, 25);
}
b.eyes    {
color: brown;
}
h2.class     {
  margin: 0 auto;
  text-align: center;
  font-size: 5em;
  font-weight: bolder;
  color: darkgray;
  background-color: none;
  border: none;
}
h3  {
  line-height: 28px;
  text-align: left;
  font-style: italic;
}
.header   {
  display: block;
  margin: 0;
padding: 0;
background-image: url('../images/bamSky.jpg');
background-repeat: no-repeat;
background-size: cover;
  height: auto;
}
.center     {
margin: 0 auto;
width: 100%;
background-color: rgba(22, 49, 66, 0.6);
position: fixed;
z-index: 1000;
}


h4.subheads   {
font-size: 24px;
line-height: 24px;
color: white;
text-align: left;
padding: 20px;
font-weight: bolder;
background-color: black;
border-top: brown solid 1px;
border-bottom: brown solid 1px;
}
strong    {
font-weight: bolder;
}

.topnav   {
  margin: 0 auto;
  max-width: 1920px;
  text-align: center;
  background-color: rgb(122, 30, 30);
  padding: 20px;
  height: auto;
  top: 0;
}

.topnav a {
  margin: 0 auto;
  display: inline-block;
  color: white;
  padding: 5px 10px;
  text-decoration: none;
  font-size: 24px;
}

.topnav a:hover {
  color:  white;
  background-color: rgb(156, 13, 13);
  margin: 0;
  
}
.topnav a.active {
  margin: 20px 30px;
  padding: 10px;
  border: solid 0.5px rgba(255, 255, 255, 0.3);
  background-color: #295b7b;
  border-bottom-right-radius: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bolder;
  color: white;
  background: linear-gradient(
    to top,
    #295b7b 0%,
    #295b7b 50%,
    #163142 50%,
    #163142 100%
  );
  float: left;
  max-width: 100px;
}
a.link .msasco  {
  color: light grey;

}
.wrapper    {
  margin: 0 auto;
  padding-top: 160px;
  background-color: #ffc750;
  margin-bottom: 160px;
  background:  repeating-linear-gradient(
45deg,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.4) 2px,
rgba(0, 0, 0, 0.4) 2px,
rgba(0, 0, 0, 0.3) 10px
);
  background-size: contain;   
}
.flex-item-left2 {
  background-color: #fcefcd ;
}
.flex-item-right2 {
  background-color: #cdc9ae;
}



.romans   {
  font-size: 32px;
}
/*Remove this titlePage below when ready to display articles*/
div p.titlePage2  {
  margin: 0 auto;
  background-color: white; 
  font-size: 42px; 
  color: black; 
  padding: 60px; 
  text-align: center;
  font-weight: bold;
  line-height: 38px;
  border: solid 0.5px rgba(255, 255, 255, 0.5);
}
.msasco   {
margin: 0 auto;
max-width: 1920px;
font-family: 'PT Sans', sans-serif;
font-size: 100%;
color: whitesmoke;
width: 100%;
margin: 0 auto;
font-weight: 400;
text-align: center;
padding: 60px;
color: gray;
background-color: white;

}

div.bodytext p:first-child  {
font-size: 2em;
border: none;
max-width: 1400px;
padding-bottom: 80px;
margin: 0 80px;
}
  /*Remove this titlePage below when ready to display articles*/
.topnav .icon {
  display: none;
}
@media screen and (max-width: 1480px) {
  .topnav a {
    font-size: 20px;
    text-align: left;
  }
  .topnav a.active    {
    font-size: 24px;
  }
}

/*@media screen and (max-width: 1059px) {
  .topnav a {
    font-size: 18px;
  }
  .topnav a.active    {
    font-size: 24px;
  }
 
}
@media screen and (max-width: 1040px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
    margin-right: 60px;
    margin-top: 10px;
    background-color: white;
    border-top-left-radius: 10px;
  border-bottom-right-radius: 10px; 
  border: solid 2px #295b7b;
  }
  .topnav a {
    background-color: rgb(131, 34, 34);

  }
}

@media screen and (max-width: 1096px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
    
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}*/
@media screen and (max-width: 1067px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 1067px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.heads   {
  margin: 0.5px auto;
}
ul.prophecy   {
  width: 100%;
  padding:0;
}
.prophecy li  {
font-weight: lighter;
list-style-type: circle;
  font-size: 20px;
  line-height: 28px;
  text-align: left;
  color: brown;
}
ul.prophecy2   {
  width: 100%;
  padding:0;
  color: #8a7c7c;
}
.prophecy2 li  {
margin-left: 15px;
font-weight: lighter;
  font-size: 20px;
  line-height: 28px;
  text-align: left;
  padding-bottom: 10px;
}

ul.navBar2 {
  list-style-type: none;
  margin: 30px auto;
  width: 100%;
  padding:0;
  vertical-align: middle;
}
.navBar2 li {
  display: inline;
  vertical-align: middle;
}
.navBar2 li a   {
  margin: 0 auto;
  font-size: 1.5em;
  color: black;
  text-align: center;
  text-decoration: none;
}
.navBar2 li a:hover   {
  color: rgb(127, 30, 30);
}
.references    {
  margin: 0 auto;
  padding: 10px;
  background-image: url(../images/references.jpg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
.reference      {
background-color: black;
  color: white;
  font-size: 24px;
  padding: 15px;
  line-height: 110%;
  text-align: left;
}
.scriptureReference   {
background-color: #ccc9ad;
font-size: 18px;
}

/* Who We Were Navigation*/
/* Row - Col- InlineStyle*/
/* Next Iframe mvd InlineStyles*/
.scriptureHeading      {
  margin: 0 auto;
  width: 100%;
  padding: 30px;
  font-size: 3em;
  font-style: normal;
  background-color: #295b7b;
  color: white;
  display: inline-block;
  margin-left: 0; 
}
.scripture      {
  padding: 50px 60px;
}
h3.verse  {
  margin: 0;
  color: brown;
  display: block;
  padding-bottom: 0;
  line-height: 28px;
}
p.commentaries   {
  font-weight: lighter;
  font-size: 20px;
  line-height: 28px;
  text-align: left;
}
.top-content    {
  margin: 0 auto;
  width: 100%;
}
.quote      {
  color: #993366;
  font-style: italic;
}
.insertSriptComments  {
  border: none;
  height:1180px; 
  scroll-margin:no; 
  width:100%;
}
p.declaration, p.vision, p.mission     {
  color: brown;
  font-size: 26px;
}
.content	{
    width:100%;
    background-color:rgb(209, 204, 177);
    font-size: 30px;
    line-height: 40px;
    color: darkgray;
}
.mvdBackground      {
  margin: 0 auto;
  background-color: #ccc9ad;
}
.mvd {
  margin: 0 auto;
  width: 1200px;
  padding: 30px;
  font-family: 'palatino';
  font-size: 24px;
  line-height: 42px;
  color: #8a7c7c;
  text-align: left;
}
.commentary	{
    width:auto;
    background-color:black;
    color:white;
    height:auto;
} 
.commentaries     {
  text-align: left; 
}
.scriptReferences       {
  background-image: url(../images/commentary.jpg);
  background-color: black;
  background-repeat: no-repeat;
  background-position: top;  
}
.romansRoad     {
  margin: 0 auto;
  width:83.33%;
  padding: 0;
  color: lightgray;
  text-align: center;
  display: inline-block;
}
.corner     {
  width: 8.33%;
  background-image: url(images/romanImage-3.png);
}

.container {
width: 100%;
margin: 0 auto;
max-width: 1920px;
padding: 0;
}
.containers {
  position: relative;
  margin: 0 auto;
  max-width: 1920px;
  padding: 100px;
  }
.flex-container {
display: flex;
flex-wrap: nowrap;
font-size: 24px;
text-align: left;
line-height: 42px;
background-color: #295b7b;
}
.flex-container2 {
display: flex;
flex-wrap: wrap;
border: brown solid 5px;


}
.flex-item-left {
flex: 5%;
max-width: 160px;
}
.flex-item-middle {
flex: 80%;
}
.flex-item-right {
flex: 5%;
max-width: 160px;
}
/* Second Flex Container*/

.flex-item-left2 {
background-color: #fcefcd;
flex: 50%;
padding: 60px;
}
.flex-item-right2 {
background-color: #cdc9ae;
flex: 50%;
padding: 60px;
}
h3.verse  {
  margin: 0;
  color: brown;
  display: block;
  padding-bottom: 0;
  font-size: 20px;
  line-height: 28px;
}

.column {
float: left;
width: 33.3%;
height: auto;
padding: 20px auto;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

table {
margin: 0 auto;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}

th, td {
text-align: left;
padding: 8px 20px;
font-size: 0.8em;
line-height: 1.3em;
}
th		{
background-color: black;
color: white;
}
.redLetter    {
color: brown;
}

tr:nth-child(even){background-color: #cdc9ae;}
tr:nth-child(odd){background-color: #fcefcd;}

@media (max-width: 1100px) {
.flex-item-middle    {
  flex: 100%;
  flex-direction: column;
}


@media    (max-width: 452px)    {
th, tr, td   {
  font-size: 14px;
}

[class*="col-"] {
  float: none;
}
}
.tooltip    {  
position: relative;  
display: inline-block;  
border-bottom: 1px solid brown; 
}  

.tooltip .tooltiptext {  
visibility: hidden;  
width: 400px;  
background-color: brown; 
color: #fff;  
text-align: left;  
border-radius: 6px;  
padding: 10px;  
/* Position the tooltip */  
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -200px; 
opacity: 0;
transition: opacity 1s;
}  

.tooltip:hover .tooltiptext {  
visibility: visible; 
opacity: 1; 
}  
.tooltipHeader      {
color: black;
}
@media screen and (max-width: 1461px) {
.tooltip .tooltiptext {

    width: 300px;
    left: 50%;
    margin-left: -150px; 
    z-index: 1;
}
}
@media screen and (max-width: 1023px) {
.colLeft {
padding-left: 20px;
}
.tooltip .tooltiptext .move {
margin-left: -110px;
}
}


}
@media screen and (max-width: 1100px) and (min-width: 620px) {
.flex-item-right2, .flex-item-left2 {
    flex: 100%;
    padding: 0 120px;
    flex-direction: column;
    background-color: #fcefcd;
  }
  .flex-item-middle3 {
    flex: 100%;
  }
  .flex-item-right2   {
  padding-top: 0;
  padding-bottom: 90px;  
  }
  .flex-item-left2    {
  padding-bottom: 0;
  padding-top: 90px;
  }
}
@media screen and (max-width: 619px) and (min-width: 320px) {
.flex-item-right2, .flex-item-left2 {
    flex: 100%;
    padding: 0 20px;
    flex-direction: column;
    background-color: #fcefcd;
  }
  .flex-item-middle3 {
    flex: 100%;
  }
  .flex-item-right2   {
  padding-top: 0;
  padding-bottom: 30px;  
  }
  .flex-item-left2    {
  padding-bottom: 0;
  padding-top: 30px;
  }
}