html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #7eb4d6;
}

h1.mt3.gb-passage-reference{font-family: Lato, Arial, Helvetica,sans-serif !important; font-size: 60px !important; color: #000033 !important; font-weight: bold !important;}
p.s1{font-family: Lato, Arial, Helvetica,sans-serif !important; font-size: 55px !important; color: #500000 !important;font-weight: bold !important;}
p.p{font-family: Lato, Arial, Helvetica,sans-serif !important; font-size: 50px !important;}
p.q1{font-family: Arial, Helvetica,sans-serif !important; font-size: 45px !important; font-weight: bold !important;}
p.q2{font-family: Arial, Helvetica,sans-serif !important; font-size: 45px !important; font-weight: bold !important;}
p.m{font-family: Arial, Helvetica,sans-serif !important; font-size: 45px !important; font-weight: bold !important;}
p.gb-passage-copyright{display:none !important;}

td.pagetitle a{font-size: 45px; font-family: 'Lato', 'sans-serif'; color: #000033; text-decoration: none;}

body {
   margin: 0;
   padding: 0;
  background-color:#FFFFFF;
}

span.album {font-size: 25px; font-family: 'Lato', 'sans-serif';}
span.album a{font-size: 25px; font-family: 'Lato', 'sans-serif'; color: #000033; text-decoration: none;}

a.lato {font-family: Lato; text-decoration: none; color: #000033; font-size: 50px;}

p{
font-family: 'Lato', 'sans-serif';
color: #000000;
font-size: 45px;
}

#container {
   display: flex;
   min-height: 100%;
}


.readlinks { font-family: Arial, Helvetica, sans-serif; font-size: 60px; color: blue; text-decoration: none}
.readlinks:hover {font-family: Arial, Helvetica, sans-serif; font-size: 60px; color: red; text-decoration: none}

.readlinks1 { font-family: Arial, Helvetica, sans-serif; font-size: 60px; color: #000033; text-decoration: none}
.readlinks1:hover {font-family: Arial, Helvetica, sans-serif; font-size: 60px; color: red; text-decoration: none}


.links4 { font-family: Arial, Helvetica, sans-serif; font-size: 50px; color: blue; text-decoration: none}
.links4:hover {font-family: Arial, Helvetica, sans-serif; font-size: 50px; color: red; text-decoration: none}

/* css for Bible Quiz page*/

.arial12 {
font-color: #000000 !important;
font-size: 40px !important;
}

.arial14 {
font-color: #0099FF !important;
font-size: 40px !important;
}


input[type=radio] {
border: 1px;
width: 5em;
height: 5em;
}

/* Full-width inputs */
input[type=text],input[type=number] {
    width: 700px;
    padding: 2px;
    margin: auto;
    display: inline-block;
    border: 1px solid #000000;
    box-sizing: border-box;
    height: 80px;
    line-height: 80px;
    vertical-align: middle;
    color: #000000;
    font-family: Lato;
    font-size: 60px;
    text-align: center;
    background-color: #FFFFFF;
    position: relative;
}


input[type=submit]{
font-size: 40px;
vertical-align: middle;
height: 80px;
line-height: 80px;
font-family: Lato;
border: 1px solid #000000;
background-color: #FFFFFF;
color: #000000;
}


UL {
font-weight: normal !important;
}

/* css for Bible Quiz page*/








/* css for events page*/
h1{
font-family: 'Lato', 'sans-serif';
color: #000000;
font-size: 60px;
font-weight: bold;
}

a.events:link {
     font-family: Arial, serif; color: #2E86C1; text-decoration: none;
}

a.events:hover {
     font-family: Arial, serif; color: #B03A2E; text-decoration: none;
}

a.events:visited {
     font-family: Arial, serif; color: #2E86C1; text-decoration: none;
}
a.events:active {
    font-family: Arial, serif; color: #2E86C1; text-decoration: none;
}

table.LD {
    width: 90%; font-family: Arial, serif; color: #000000; font-size: 30px;
}

td.pagetitle {
    width: 100%; text-align: left; font-family: Arial, serif; color: #000000; background-color: #c6dfee; border: 1px solid #000000; font-size: 3em; font-weight: bold; padding: 5px;
}
/*
td.footer {
    width: 100%; text-align: center; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; font-family: Arial, serif; color: #000000; border: 1px solid #000000; padding: 5px;
}

table.rounded {
    border-top-left-radius: 25px; border: 1px solid #000000; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
}
*/
td.compbox {
    height: auto;  width: 80%; text-align: left; font-family: Arial, serif; color: #000000; border: 1px solid #000000; padding: 5px; font-size: 40px;
}

td.datebox {
    width: 20%; height: auto; text-align: left; font-family: Arial, serif; color: #000000; border: 1px solid #000000; font-size: 2.5em; padding: 5px;
}


/* Read More Competencies */
.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0em;
  transition: .4s ease;
  color: #500000;


}

.read-more-state:checked ~ .read-more-wrap .read-more-target{
  opacity: 1;
  font-size: inherit;
  max-height: 999em;

}

.read-more-state ~ .read-more-trigger:before {
  content: 'I CAN...';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'CLOSE';
}


p.read-more-wrap {
  height: auto;
  margin: 0px 0px 0px 0px;
  /*font-size: 2em;
  color: #0000FF;
  font-weight: normal;
  font-style: italic;*/
}

p.read-more-item {
  height: auto;
  margin: 0px 0px 0px 0px;
  /*font-size: 2.5em;
  color: #000000;
  font-weight: normal;*/
}

label {
  font-size: .5em;
  color: #0000FF;
  font-weight: bold;
}

.read-more-trigger {
  cursor: pointer;
  display: table;
  padding: 0em;
  color: #500000;
  font-size: .9em;
  line-height: 1;
  border: 0px solid #ddd;
  border-radius: 0em;
  font-weight: bold;
  margin: 0px 0px 0px 300px;
}




/* end of css for events page*/






.main_menu {
   position: absolute;
   opacity: 0;
}
.main_label {
   position: absolute;
   top: 10px;
   left: 40px;
   z-index: 1;
   display: block;
   font-size:7em;
   color: #FFFFFF;
   cursor: pointer;
   transform: translate3d(0, 0, 0);
   transition: transform .4s;
}
.main_menu:checked ~ .main_label {
   transform: translate3d(0px, 0px, 0) rotate(90deg);
}

.main_menu:checked ~ .content {
   transform: translate3d(0px, 0px, 0);
}
.main_menu:checked ~ .slide-menu {
   transform: translate3d(0, 0px, 0);
}
.main_menu:checked ~ .slide-menu .menu li {
   width: 100%;

}

.main_menu1 {
   position: absolute;
   opacity: 0;
}
.main_label1 {
   position: absolute;
   top: 2px;
   left: 40px;
   z-index: 1;
   display: block;
   font-size:8em;
   color: #FFFFFF;
   cursor: pointer;
   transform: translate3d(0, 0, 0);
   transition: transform .4s;
}
.main_menu1:checked ~ .main_label1 {
   transform: translate3d(0px, 0px, 0) rotate(90deg);
}

.main_menu1:checked ~ .content {
   transform: translate3d(0px, 0px, 0);
}
.main_menu1:checked ~ .slide-menu1 {
   transform: translate3d(0, 0px, 0);
}
.main_menu1:checked ~ .slide-menu1 .menu1 li {
   width: 100%;

}
.slide-menu {
   transform: translate3d(-700px, 0, 0);
   position: absolute;
   width: 700px;
   background: #338EBC;
   color: #ddd;
   left: 0;
   top: 150;
   height: 100%;
   transition: all .4s;
}
.slide-menu h1 {
   margin: 10px;
   text-shadow: 1px 1px 1px #000;
   font-size: 4em;
   color: #FFFFFF;
   font-family: arial, sans-serif;

}
.menu {
   list-style: none;
   padding: 0;
   margin: 0;


}


.menu a {
   display: block;
   height:50%;
   text-decoration: none;
   color: #898989;
   text-shadow: 1px 1px 1px #000;
   font-family: arial, sans-serif;
   font-size: 3em;
   padding: 15px;
   background: linear-gradient(#010E2B, #010E2B);
   border-bottom: 0px solid #1e222b;
   box-shadow: inset 0px 0px 0px #8b9db3;

}
.menu a:hover {
   background: linear-gradient(#C70039  , #C70039  );
   color: #FFFFFF;
   box-shadow: inset 0px 1px 1px #475059;
   opacity: 1;
}

.menu1 {
   list-style: none;
   padding: 0;
   margin: 0;


}


.menu1 a {
   display: block;
   height:50%;
   text-decoration: none;
   color: #FFFFFF;
   text-shadow: 1px 1px 1px #000;
   font-family: arial, sans-serif;
   font-size: 3em;
   padding: 8px 8px 8px 8px;
   background: #000000;
   border-bottom: 1px solid #707B7C;
   border-top: 1px solid #707B7C;
   opacity: 1;

}
.menu1 a:hover {
   background: #000000;
   color: #FFFFFF;
   opacity: 1;
}

.slide-menu1 {
   transform: translate3d(-100%, 0, 0);
   position: absolute;
   width: 100%;
   background: #000000;
   color: #FFFFFF;
   left: 0;
   top: 290;
   height: 50%;
   transition: all .4s;
   opacity: .8;
}
.slide-menu1 h1 {
   margin: 20px;
   font-size: 3em;
   color: #FFFFFF;
   font-family: arial, sans-serif;

}

.smallheader{text-align: center; font-family: Arial, serif; color: #000000;  font-size: 12px;  white-space: nowrap; padding: 1px; font-weight: bold;}

.leftsmallheader{text-align: left; font-family: Arial, serif; color: #000000;  font-size: 40px;  padding: 1px; font-weight: bold; padding-bottom: 10px;}

.links5 { font-family: Arial, Helvetica, sans-serif; font-size: 50px; color: blue; text-decoration: none}
.links5:hover {font-family: Arial, Helvetica, sans-serif; font-size: 50px; color: red; text-decoration: none}


.headerfont {text-align: center; font-family: Arial, serif; color: #000000;  font-size: 20px;  white-space: nowrap; padding: 1px; font-weight: bold;}



td.left{
    text-align: left; font-family: Arial, serif; color: #000000;  font-size: 40px;  font-weight: bold; white-space: nowrap;
}

td.leftkids{
    text-align: left; font-family: Arial, serif; color: #000000;  font-size: 30px;
    border-bottom: 1px solid #000000; padding: 2px;
}

td.centerkids{
    text-align: center; font-family: Arial, serif; color: #000000;  font-size: 30px;  font-weight: bold;
    border-top: 1px solid #000000; border-bottom: 1px solid #000000;
}


td.left4{
    width: 100px; height: 98px; background-color: #00FF00; border-radius: 50px; border: 1px solid #000000;
}

td.left4 a{
    text-align: center; font-family: Arial, serif; font-size: 35px;  font-weight: bold; color: #000000; text-decoration: none;
}

td.left5{
    width: 100px; height: 98px; background-color: #000033; border-radius: 50px; border: 1px solid #CCCCCC;
}
td.left5 a{
    text-align: center; font-family: Arial, serif; font-size: 35px;  font-weight: bold; color: #909497; text-decoration: none;
}


td.left2{
    text-align: left; font-family: Arial, serif; color: #000000;  font-size: 40px;  font-weight: bold; text-decoration: underline; white-space: nowrap;
}

td.left1{
    text-align: left; font-family: Arial, serif; color: #000000;  font-size: 40px;  white-space: nowrap;
}

td.center{
    text-align: center; font-family: Arial, serif; color: #000000;  font-size: 40px;
}

/* ORIGINAL SPLASH SCREEN */
/* .content1 {
    position: fixed;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    background-image: url('icons/church_splash.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
} */


.content1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;       /* Changed from 100vh to 100% for better mobile support */
    background-color: #7eb4d6;
    display: flex;
    flex-direction: column;
    align-items: center; 
    overflow: hidden; 
}

.content {
    display: table;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
}

a.months:link {
     font-family: Arial, serif; color: #FFFFFF; text-decoration: none;
}

a.months:hover {
     font-family: Arial, serif; color: #FFFFFF; text-decoration: none;
}

a.months:visited {
     font-family: Arial, serif; color: #FFFFFF; text-decoration: none;
}
a.months:active {
    font-family: Arial, serif; color: #FFFFFF; text-decoration: none;
}

.page_content {
    display: table;
    margin: 290px 0px 0px 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    background-image: url('icons/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    font-size: 4rem;
    font-family: Arial, serif;

}

.page_content_white {
    display: table;
    margin: 290px 0px 0px 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    background-color: #FFFFFF;
    font-size: 4rem;
    font-family: Arial, serif;

}

.page_content_audio{
    display: table;
    margin: 550px 0px 0px 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    background-color: #FFFFFF;
    font-size: 4rem;
    font-family: Arial, serif;

}

.page_content_6{
    display: table;
    margin: 550px 0px 0px 0px;
    width: 100%;
    height: 100%;
    padding: 15px;
    background-color: #FFFFFF;
    font-size: 3rem;
    font-family: Arial, serif;

}

.page_content_6_plan{
    display: table;
    margin: 550px 0px 0px 0px;
    width: 100%;
    height: 100%;
    padding: 2px;
    background-color: #FFFFFF;
    font-size: 3rem;
    font-family: Arial, serif;

}
.page_content1 {
    display: table;
    margin: 400px 0px 0px 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    background-image: url('icons/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    font-size: 4rem;
    font-family: Arial, serif;

}

.page_itbs {
    display: block;
    margin: 288px 0px 0px 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    font-size: 20px;
    font-family: Arial, serif;
    background-color: #FFFFFF;

}

.page_content_schedule {
    display: block;
    margin: 288px 0px 0px 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    font-size: 4rem;
    font-family: Arial, serif;

}

.page_content_schedule1 {
    display: block;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    font-size: 4rem;
    font-family: Arial, serif;

}

.page_content_white_1 {
    display: table;
    margin: 400px 0px 0px 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    background-color: #FFFFFF;
    font-size: 4rem;
    font-family: Arial, serif;

}


.header-cont {
    width:100%;
    position:fixed;
    top:0px;
    left:0px;
    opacity: 1;
    z-index: 1;
}

.header{
    width:100%;
    top:0px;
    left:0px;
    opacity: 1;
    z-index: 1;
    height:290px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-bottom: 1px solid #000000;

}

.header2{
    width:100%;
    top:0px;
    left:0px;
    opacity: 1;
    z-index: 1;
    height:290px;

}




    .links3 { font-family: Arial, Helvetica, sans-serif; font-size: 50px; color: blue; text-decoration: none}
    .links3:hover {font-family: Arial, Helvetica, sans-serif; font-size: 50px; color: red; text-decoration: none}


    .form {
        position: fixed;
        margin: 290px auto;
        width: 100%;
        height: 100px;
        background-color: #CCCCCC;
        padding: 10px;
    }

    .audio_form {
        position: fixed;
        margin: 290px auto;
        width: 100%;
        height: 230px;
        background-color: #85C1E9;
        padding: 10px;
        border-bottom: 1px solid #000000;
    }

    .six_form {
        position: fixed;
        margin: 290px auto;
        width: 100%;
        height: 250px;
        background-color: #85C1E9;
        padding: 0px;
        border-bottom: 1px solid #000000;
    }


    form {
        border: 0px solid #f1f1f1;
        width: 100%;
        margin: auto;
    }

    /* Full-width inputs */
    select{
        width: 75%;
        display: inline-block;
        border: 1px solid #000000;
        box-sizing: border-box;
        height: auto;
        font-size: 3em;
        color: #000000;
        font-family: arial,sans-serif;
        text-align: center;
        background-color: #FFFFFF;
        position: relative;
    }

    #warning-message { display: none; }
    @media only screen and (orientation:landscape){
        #wrapper { display:none; }
        #warning-message { display:block; }
    }
    @media only screen and (orientation:portrait){
        #warning-message { display:none; }
    }


    .landscape {

      font-size: 40px;
      color: #000000;
      text-align: center;
      vertical-align: middle;
      font-weight: bold;
      font-family: Papyrus,Arial,Helvetica,sans-serif;
    z-index: -1;
    width:100%;
    height:100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    }
/* CSS for Bible Verse */
    .dailyVersesWrapper a
{
  margin-top: .5em;
  font-family: Papyrus,Arial,Helvetica,sans-serif;
  color:#000000;
  font-size:40px;
}

.dailyVerses.bibleVerse a
{
  margin-top: .5em;
  font-family: Papyrus,Arial,Helvetica,sans-serif;
  color:#000000;
  font-size:40px;
}

.dailyVerses.bibleVerse
{
margin-top: .5em;
font-family: Papyrus,Arial,Helvetica,sans-serif;
color:#000000;
font-size:40px;
}

/* end CSS for Bible Verse */


    /* Set a style for all buttons */
    #SubmitButton {
        color: #000000;
        border: 1px solid #000000;
        cursor: pointer;
        width: 20%;
        height: auto;
        font-size: 3em;
        font-family: arial,sans-serif;
        background-color: #FFFFFF;
    }



    /* Set a style for all buttons */