*{
  box-sizing: border-box;
  padding: 0;
  margin:0;
  font-size: 14px;
  color: #000;
  list-style: none;
  text-decoration: none;
  user-select: none;
}

.home{
  position: relative;
  background-blend-mode: hue;
  background-image: url("faithinGod.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  height:100vh;
}


/*Logo Affair*/
.head1{
 float: right;
 margin: 5px;
 overflow: hidden;
}

.head1 img {
  width:30px;
 align-items: flex-end;
}

.logo{
  border-radius: 50px;
  float: right;
  margin-right: 40px;
}

.ds{
  color: white;
  margin-left: 20px;
}
/*Sidebar navigation*/
.sidebar{
  position:fixed;
  left:-250px;
  width: 250px;
  height:100%;
  background:#0a861d;
  user-select: none;
  transition: all .5s ease;
  z-index: 1;
  overflow-wrap: all;
}

.side{
  opacity: 0.9;
}

.sidebar ul a {
  display: block;
  height: 80%;
  width: 100%;
  line-height: 65px;
  font-size: 20px;
  color:white;
  padding-left:15px;
  box-shadow: border-box;
  transition: all .4s;
}

.u .l:hover a{
  padding-left:65px;
  box-shadow:2px 2px 4px;
  transition: all;
}

.sidebar ul a i {
  margin-right:16px;
}
  
.sidebar ul{
  margin-right: 5px;
}

.sidebar header{
  font-size: 22px;
  color:white;
  text-align:center;
  line-height:70px;
}

#check{
  display: none;
}

label #btn, label #cancel{
  position: absolute;
  cursor: pointer;
  background: #042331;
  border-radius: 3px;
}

label #btn{
  left: 40px;
  top:20px;
  font-size: 35px;
  color: white;
  padding: 6px 12px;
  transition: all;
}

label #cancel{
  position: fixed;
  z-index: 1111;
  left: -195px;
  top:5px;
  font-size:20px;
  color:white;
  padding: 7px 10px;
  transition: all 0.5s;
}

#check:checked ~ .sidebar{
  left:0;
}

#check:checked ~label #btn{
  left:250px;
  opacity: 0;
  pointer-events: none;
}

#check:checked ~label #cancel{
  left: 205px;
}

.A a i{
  font-size: 30px;
}

.A a i:hover{
  color:whitesmoke;
}

ul .A{
  padding-right: 20px;
  margin: 0px;
}

.home{
  font-family: OptimusPrinceps;
  font-weight: bold;
  font-size: 20px;
  color:white;
  font-weight: bold;
}

.fa-home{
    padding-right: 20px;
}

.A{
  padding-right: 0;
  margin-right: 5px
}

.into{
  margin:5px 5px;
}
  
/*Body Column partern*/
.row::after{
  content: "";
  clear: both;
  display: table;
}

.row_body{
  background: rgba(225, 225, 225, 0.9);
  line-height: 0.5;
  background: transparent;
}

.column {
  float: left;
  padding:10px;
  margin:5px;
}

.column.side{
  width: 18%;
}

.column.middle{
  width: 60%;
  background-color:  rgba(225, 225, 225, 0.9);
  background: transparent;
}

.tag_right{
  float: right;
  position: top;
}

.card{
  display: inline-block;
  width: 42%;
  height: 0 auto;
  padding:10px;
  margin: 13px;
  border-radius: 1em;
  background-color: #ccc;
  background:rgba(225, 225, 225, 0.1);
}

.card:hover{
  border: 1px solid;
}

.title{
  font-weight: bolder;
  font-size: 20px;
  text-align: center;
  line-height: 1.5;
  color:cyan;
}

div{
  color: antiquewhite;
}

.title:hover{
  cursor: pointer;
  color: white;
}

.close:hover{
  cursor: pointer;
  background: rgb(244, 245, 245);
  color: rgb(253, 4, 4);
  font-weight: bold;
}

.close{
  color: honeydew;
  font-size: 20px;
  width: 30px;
  text-align: center;
  float: right;
  border-radius: 50%;
  right: 0;
}

.btn{
  line-height: 1.6;
}
.car a{
  color: #fff;
}
.car a:hover{
  font-size: large;
}
/*Sunday school handle for toggle and navigation*/
.sunday{
  padding-left: 20px;
  display: none;
}

.batch{
  padding-left: 20px;
  display: none;
}
.payment{
  margin-left: 25px;
  display: none;
}

.zone{
  display: none;
}

.parish{
  display: none;
}

.area{
  display: none;
}

.region{
  display: none;
}

.region li div:hover {
  font-size: large;
}


.fa{
  font-size: 100px;
}
/*ABOUT.HTML CONTENT*/
.About{
  margin-top: 20%;
  font-size: 25px;
  padding: 10px;
  color: white;
  line-height: 1;
  text-align: justify;
  font-family: Cormorant Upright;
  }

.About strong{
  color: white;
  font-weight: bolder;
  font-size: 25px;
  word-spacing: 6px;
}
.cool{
  color: rgb(21, 32, 192);
  font-size: 10px;
}

.cool:hover{
  cursor: pointer;
  color:hotpink;
}
.ishola{
  border-radius: 4px;
  display: none;
}

hr{
  width: 50%;
  margin: 0% 0% 25% 25%;
}
.updating {
    margin-top: 100px;
    font-size: 10em;
    padding: 10px;
    color: white;
    text-align: center;
  }


/*middle content design*/
.offering, .tithe, .welfare, .donation{
  margin: 5px;
  width: 120px;
  height: 0 auto;
  padding: 5px;
  font-size: 15px;
  font-weight: 20px;
  background-color: white;
  color:green;
  border:1.5px solid lightgreen;
  border-radius: 4px;
}

.offering:hover {
  background: green;
}

.in{
  font-family: Californian FB;
}
.in:hover a{
  color: white;
  font-size: 15px;
  font-weight: 40px;
  font-family: Californian FB;
}

.tithe:hover {
  background: green;
}

.welfare:hover {
  background-color: green;
}

.donation:hover {
  background: green;
}
/*** Contact Page ***/
.columnCont {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4rem;
  width: 100%;
  height: 190vh;
  border: 2px solid #000;
}

.columnCont .first {
  border: 1px solid red;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 0  4rem;
}

.columnCont .first .cont1{
  width: 380px;
  margin: 20px auto;
  border:1px solid #000;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}

.columnCont .first .cont1  img{
  width: 90%;
  max-width: 400px;
  height: 400px;
}

.profile{
  text-align: center;
  font-size: 15px;
  }
  
  .columnCont .cont {
    border: 1px solid red;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin: 0  4rem;
  }

  .columnCont .cont .contCard{
    width: 180px;
    margin: 20px auto;
    border:1px solid #000;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
/* SERVICES PAGE */
.Service-body {
  background: rgba(53, 95, 86, 0.5);
}
.Service-row{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background: transparent;
  height: 150vh;
  margin-top: 10px;
}

.middle_services{
  flex: 60%;
  padding:20px;
}
.MonthlyServices{
  background-color: #000;
  text-align: center;
  font-size: 25px;
  font-family:Lucida Handwriting;
  color: white;
  border-radius:4px 4px 0 0;
  -webkit-border-radius:4px 4px 0 0;
  -moz-border-radius:4px 4px 0 0;
  -ms-border-radius:4px 4px 0 0;
  -o-border-radius:4px 4px 0 0;
}
.Service-side{
  flex: 20%;
  padding:20px
}

.Point {
  width: 100%; 
  height:'';
  background-color:rgba(221, 230, 217, 0.4); 
  padding: 5px;
}

 .PointIn {
  width: 100%;
  background-color:rgba(221, 230, 217, 0.9);
  /* margin: 10px; */
  border-radius:4px;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  -ms-border-radius:4px;
  -o-border-radius:4px;
}
.TestimonyBtn {
  width:100%;
  height: 40%;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight:bold;
  color: #f1f1f1;
  background-color: rgb(40, 40, 218);
  border: none;
  outline: none;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

i {
  padding: 5px;
  color:#fff;
  font-size:15px;
  align-items:center;
}
.TestimonyBtn:hover {
  border: #f1f1f1 solid 2px;
  background: rgba(86, 86, 201, 0.9);
  transition: ease-in-out .3s;
  -webkit-transition: ease-in-out .3s;
  -moz-transition: ease-in-out .3s;
  -ms-transition: ease-in-out .3s;
  -o-transition: ease-in-out .3s;
}
.testimony {
  border: #000 solid 2px;
  padding: none;
  width: 100%;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}
textarea {
  align-self: center;
  width: -moz-available;
  font-size: 10px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  padding: 5px;
  color: #fff;
}

#PointInDelete:hover {
  border: #f1f1f1 solid 1.5px;
  color: #fff;
}

#PointInDelete {
 width: 80px;
 height: 30px;
 margin: 8px 4px 4px 4px;
 border: none;
 outline: none;
 border-radius: 4px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 -ms-border-radius: 4px;
 -o-border-radius: 4px;
}
#PointInPost {
width: 80px;
 height: 30px;
 margin: 8px 4px 4px 35px;
 border: none;
 outline: none;
 border-radius: 4px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 -ms-border-radius: 4px;
 -o-border-radius: 4px;
}
.postBtn {
  display: none;
  flex-wrap: wrap;
}

#PointInPost:hover {
  background-color: rgba(64, 64, 247, 0.9);
  color: #fff;
  border: #f1f1f1 solid 1px;
}
.thanksgiving-panel{
width:100%;
margin: 2px auto;
background-color: rgb(88, 85, 85);
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
-ms-border-radius:8px;
-o-border-radius:8px;
}

.thanksgiving-panel img {
max-width: 180px;
max-height: 100%;
float: left;
margin: 8px;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
-ms-border-radius:8px;
-o-border-radius:8px;
}
.thanksgiving{
font-weight: bolder;
font-size: 15px;
text-align: justify;
padding: 15px;
}

.HeadingNote {
  font-size: 20px;
  padding-bottom: 8px;
}

/*SERVICE.HTML*/
.thanksgiving-alone{
  background-color: rgb(63, 58, 92);
}

.thanksgiving-service2{
  text-align: justify;
  line-height: 1.5;
  padding: 20px;
  font-weight: bold;
  color: beige;
}
.thanksgiving-service3{
  color: white;
  line-height: 1.5;
  text-align: justify;
}

.thanksgiving-service, .child-dedication{
  text-align: justify;
  line-height: 1.5;
  padding: 20px;
  font-weight: bold;
}

.ser{
  width: 80%;
  text-align: center;
  line-height: 0.5;
}

/*Youth Card Link*/
.youth a i{
  padding-right: 10px;
  font-size: 15px;
  color: white;
}
.youth i{
  padding-right: 10px;
  font-size: 15px;
  color: white;
}
.youth a i:hover{
  color: blue;
  cursor: pointer;
}
.youth > a:hover{
  color: blue;
  cursor: pointer;
}
.youth a i:hover{
  color: blue;
}
.youth a{
  color: white;
  font-size: 15px;
}


/*Youth Modal Form*/
input[type=text], input[type=password]{
  display: inline-block;
  width: 90%;
  padding: 15px;
  margin:5px 0 22px 0;
  border: none;
  background:darkgrey;
  border-radius: 4px;
  font-weight: bold;
  font-family: cambria;
}
input[type=text]:focus, input[type=password]:focus{
  background-color: #f1f1f1;
  color:black;
}
h1{
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
#ModalForm{
  display:none;
  width: 100%;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  overflow: auto;
  background-color: #474e5d;
  background: rgba(225, 225, 225, 0.5);
}
.youth-container{
  padding:30px;
  align-content: center;
  width: 30%;
  height: auto;
  background-color:  rgb(19, 67, 224);
  border-radius: 8px;
  top: 30%;
  left: 50%;
  position: absolute;
  transform:translate(-50%, -50%);
}

.closemodal{
  float: right;
  font-weight: bolder;
  font-size: 35px;
  border-radius: 25%;
  padding-right: 5px;
  margin-top: 0em;
  color: white;
}

.closemodal:hover{
  background-color:  rgb(215, 213, 230);
   border-radius: 8px;
}
.YouthGateTop {
  text-align: center;
}

.YouthGate{
 text-align: center;
}

.Remember{
  padding-left: 15px;
}

label b, label span{
  color: white;
}
.Privacy{
  color: pink;
}

.youthModal h1{
  color: white;
}
.closeForm{
  color: honeydew;
  font-size: 25px;
  width: 40px;
  text-align: center;
  float: right;
  border-radius: 4px;
  top: 0;
  right: 0;
  margin-right: 15px;
}

.youth-container{
  margin-top: 40px;
}

.closeForm:hover{
  cursor: pointer;
  background: rgb(244, 245, 245);
  color: rgb(253, 4, 4);
  font-weight: bold;
}

/* IMAGE FLOW STYLING */
.imageContainer {
  width: 100%;
  position: absolute;
  bottom: 24%;
  display: flex;
  /* grid-template-rows: repeat(auto-fit, minmax(120px, ifr));
  grid-row: auto; */
  z-index: 100;
  justify-content: center;
}
.boxImage h3 {
  color: #fff;
  text-align: center;
}
.imageCube {
  width: 140px;
  margin: 0 7px;
  border: 2px solid whitesmoke;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.imageCube img {
  width: 100%;
  height: 150px;
}

/*Footer Section design*/
footer{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  padding: 10px;
  position: fixed;
  bottom: 0;
  width:100%;
  z-index: 1110;
  background-color: rgba(235, 131, 209, 0.9);
}

.foot2{
  color: white;
  font-size: 1.3rem;
  padding:10px;
}

.foot2 i{
  padding:5px;
  color: #f1f1f1;
}

.foot2:hover, .foot2 i:hover{
  color:rgb(192, 191, 191);
  cursor: pointer;
  font-weight:bold;
}

.hed{
  color: rgb(26, 21, 70);
  font-size: 1.5rem;
  outline: #ccc;
}

.company{
  color: rgb(9, 4, 10);
  align-self: flex-end;

}

/*Login Communication*/
.church a{
  float: right;
  font-size: 30px;
  font-weight: bold;
  margin:10px 30px;
  color: white;
}

.return{
  font-size: 15px;
  padding: 10px;
}
.YouthHome:hover >i,span {
  cursor: pointer;
  opacity: .5;
}

.formfill{
  width: 100%;
  margin: 40px auto 40px auto;
  display: flex;
  z-index: 2;
}

.FormOnecontent{
  border-radius:10px;
  margin: auto;
}
.YouthHome> i, span{
  float:right;
  font-size: 25px;
  color: white; 
}
.FormOnecontent .letter{
  font-size: 30px;
  padding-bottom: 15px;
  text-align: center;
  color: white;
}

.FormOnecontent .letter2{
  font-size: 15px;
  text-align: center;
  color: white;
}
input[type=text], input[type=password], input[type=password] {
  padding: 10px;
  margin: 0;
  border: 1px slategrey solid;
  border-radius: 5px;
  width: 98%;
}
/* set a style for all button*/

button{
  color: black;
  padding: 14px 20px;
  margin: 8px 0;
  cursor: pointer;
  width: 50%;
  border-radius: 8px;
}

.tandc{
  text-align: center;
  line-height: 0.5;
  padding: 15px;
  line-height: 1.5;
}

.TC{
  font-size: 50px;
  font-weight: bolder;
  text-align: center;
}
 b{
  color: white;
 }

/*Float cancel and Sign up buttons and add an equal width*/
.cancelbtny, .btny{
  width: 180px;
  font-size: 15px;
  font-family: OptimusPrinceps;
  font-weight: bolder;
  background:transparent;
  color: white;
}

.cancelbtnyLongin, .btnyLogin{
  width: 120px;
  font-size: 15px;
  font-family: OptimusPrinceps;
  font-weight: bolder;
  background:transparent;
  color: white;
}
.btny, .btnyLogin{
  float:left;
}
.cancelbtny, .cancelbtnyLongin{
  float: right;
}

.btnyLogin:hover{
  background-color: rgb(8, 151, 8);
  color: white;
}
.btny:hover {
  background-color: rgb(8, 151, 8);
  color: white;
}
.cancelbtnyLongin:hover{
  background-color:#ee0f0f;
  color: white;
  border: white 2px solid;
}
.cancelbtny:hover{
  background-color: #ee0f0f;
  color: white;
}
.clearfix{
  padding-right: 10px;
}

@media screen and (max-width:400px){
  /* INDEX FLOAT IMAGE */
  .row::after{
   height: 100vh;
  }
} 

@media screen and (max-width: 786px){
  /* INDEX FLOAT IMAGE */
  
   /* SERVICE PAGE */
   .middle_services{
     width: 100%;
   }
  
   .Service-side {
     width: 100%;
   }
   .services{
     text-align: center;
     font-size: 20px;
   }
   .youth-container{
   padding:10px;
   width: 90%;
   }
   h1{
     margin-right:20px;
   }
 }

@media screen and (max-width: 800px){
    
    /* INDEX FLOAT IMAGE */
    .imageContainer {
      top: 72%;
    }

    .row::after{
      height: 45vh;
     }

    /*SERVICE PAGE */ 
    .middle_services{
      width: auto;
      margin: 10px 0 0 10px
    }
    .Service-row{
      flex-wrap: wrap;
      height: 200vh;
    }

      .column.middle{
        width:100%;
      }
    
      .column .side{
        width: 100%;
        overflow-wrap: break-word;
        margin:5px;
      }
    /* SERVICE PAGE */
      .middle_services {
        width: 100%;
      }
    
      .Service-side {
        width: 100%;
      }
      .card{
        width:95%;
        margin-left: 3px;
      }
        
      .in:hover a{
        color: white;
        font-family: Monotype Corsiva;
      }
    
      .offering, .tithe, .welfare, .donation{
        margin: 5px;
        width: 100%;
        height: 0 auto;
        padding: 5px;
        font-size: 15px;
        font-weight: 20px;
        background-color: white;
        color:green;
        border:1.5px solid lightgreen;
        border-radius: 4px;
      }
      .batch{
        display: none;
      }
      
      .payment{
        margin-left: 85px;
        display: none;
      }
      .zone{
        display: none;
      }
      .parish{
        display: none;
      }
      .area{
        display: none;
      }
      .region{
        display: none;
      }

      label #btn{
        left: 5px;
        top:10px;
        font-size: 30px;
        color: white;
        padding: 6px 12px;
        transition: all;
      }
    
      .logo{
        top: 0px;
        margin-top: 0px;
      }
      

  /* YOUTH MATTER */
    .home{
      background-image: url("faithinGod.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }

    .church a{
      float: right;
      right: 0;
      font-size: 20px;
      font-weight: bold;
      margin-top: 10x;
    }
    /* .formfill{
      top: 0;
      margin-top:-20px;
      width: 95%; 
      z-index: 3;
    } */
    input[type=text], input[type=password], input[type=password] {
      padding: 10px;
      margin: 0;
      border: 1px slategrey solid;
      border-radius: 5px;
      width: 98%;
    }

    /*Youth Login Communication*/
    /* set a style for all button*/

    button.btny:hover {
      background-color: rgb(8, 151, 8);
      color: white;
    }

    form {
      padding-left: 10px;
    }

    /*Float cancel and Sign up buttons and add an equal width*/
    .cancelbtny, .btny{
      width: 100px;
      font-size: 15px;
      font-family: OptimusPrinceps;
      font-weight: bolder;
    }

    .cancelbtnyLongin, .btnyLogin{
    width: 100px;
    font-size: 15px;
    font-family: OptimusPrinceps;
    font-weight: bolder;
    background:transparent;
  }
  .Nextpage{
    padding-left: 0;
  }

  .updating {
    margin-top: 100px;
    font-size: 40px;
    padding: 10px;
  }

  .About{
    margin-top: 100px;
    font-size: 15px;
    padding: 10px;
  }

  hr{
    width: 150px;
  }

  .title{
    font-size:20px;
    padding: 0;
  }
}