.HomeBannerM{

    width: 100%;

    height:  75%;

    float: left;

    background-image: url("./img/vbcbanner.png");

    background-repeat: no-repeat;

    background-size: cover;

    background-color: black;

    transition: all .6s ease;

    background-position: center center;

  }

  .HomeBannerMW{

    width: 100%;

    height: auto;

    min-height: 120%;

    float: left;

    background-image: url("./img/vbcbanner.png");

    background-repeat: no-repeat;

    background-size: cover;

    background-color: black;

    transition: all .6s ease;

    background-position: center center;

  }

  .HomeBannerContentM{

    width: 100%;

    height: 100%;

    float: left;

    background-color: rgba(0, 0, 0, 0.25);

  }

  .logoM {
    width: 54%;
    height: auto;
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0%;
    background-color: white;
    animation: fadein 4s, Scalein 1s, colorShiftToWhite 2s;
    border-radius: 4%;
    /* padding: 4px 4px 4px 4px; */
    box-shadow: 2px 2px 6px grey;
}

.WelcomeM {
  width: 100%;
  height: auto;
  float: left;
  font-size: 2.2em;
  text-align: center;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  margin-top: 6%;
  margin-bottom: 1%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  animation: fadein 4s, Scalein 1s, colorShiftToWhite 2s;
  background-color: #f3ec78;
  background-image: linear-gradient(#b4855b, #672c0b);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

.WelcomeInfoM {
  width: 35%;
  height: auto;
  float: left;
  margin-top: 5%;
  padding: 4px 5px 4px 6px;
  font-size: 1.5em;
  /* background-image: linear-gradient(#d29c6b, #060200); */
  /* background-size: 100%; */
  /* -webkit-background-clip: text; */
  -moz-background-clip: text;
  /* -webkit-text-fill-color: transparent; */
  -moz-text-fill-color: transparent;
  text-align: center;
  animation: fadein 4s, Scalein 1s, colorShiftToWhite 2s;
  color: #7b5028;
  border-radius: 15px;
  background-color: white;
  margin: auto;
  margin-top: 5%;
  margin-left: 32.5%;
}

.WelcomeInfoM2 {
  width: 85%;
  margin-left: 7.5%;
    height: auto;
    float: left;
    margin-top: 5%;
    font-size: 0.9em;
    /* background-image: linear-gradient(#7b5028, #000000); */
    /* background-size: 100%; */
    /* -webkit-background-clip: text; */
    -moz-background-clip: text;
    /* -webkit-text-fill-color: transparent; */
    -moz-text-fill-color: transparent;
    text-align: center;
    animation: fadein 4s, Scalein 1s, colorShiftToWhite 2s;
    color: #7b5028;
    border-radius: 15px;
    padding: 4px 5px 4px 6px;
    background-color: white;
}
.HomePageMainButton{
  width: 58%;
  height: auto;
  color: rgb(0, 50, 29);
  margin-top: 6%;
  float: left;
  text-align: center;
  margin-left: 20%;
  margin-right: 10%;
  float: left;
  font-size: 24px;
  font-weight: bold;
  border-radius: 10px;
  padding: 1.5% 1% 1% 1%;
  background-image: linear-gradient(#7b5028, #000000);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  transition: all .2s ease;
  cursor: pointer;
  text-decoration: none;
  animation: fadein 5s, Scalein 2s, colorShiftToWhite 3s;
  border:1px solid white;
}
.LoginPageMainButton{
  width: 58%;
  height: auto;
  color: rgb(0, 50, 29);
  margin-top: 6%;
  float: left;
  text-align: center;
  margin-left: 20%;
  margin-right: 10%;
  float: left;
  font-size: 18px;
  font-weight: bold;
  border-radius: 10px;
  padding: 1.5% 1% 1% 1%;
  background-image: linear-gradient(#7b5028, #000000);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  transition: all .2s ease;
  cursor: pointer;
  text-decoration: none;
  animation: fadein 5s, Scalein 2s, colorShiftToWhite 3s;
  border:1px solid white;
}
  .arrowDownScaleUpM{

    width:12%;

    height: auto;

    display: block;

    margin-right: auto;

    animation: scaleUp 2s;

    animation-iteration-count:infinite;

    cursor: pointer;

    transition: all 1s ease;

    display: block;

    margin-left: auto;

    margin-right: auto;

        margin-top: 141%;

  }

  .arrowDownScaleUpM:hover{

    transform: scale(1.1);

  }

  .HomePageContent1M{

    width: 100%;

    height: auto;

    float: left;

    color: white;

    background-position: center bottom;

    background-size: cover;

    background-repeat:no-repeat;

      padding-bottom: 15%;

  }

  

  .sectionInfoHolderM{

    width: 90%;

    height: auto;

    float: left;

    background-color: rgba(255,255,255,0.5);

    margin-top: 20%;

    margin-left: 5%;

    padding-top: 2%;

    padding-bottom: 2%;

    border-radius: 10px;

    box-shadow: 2px 2px 6px grey;

  }

  .SectionTitleM {

    float: left;

    width: 100%;

    height: auto;

    margin-top: 1%;

    text-align: center;

    font-size: 2.5em;

    background-image: linear-gradient(rgb(0,50,29), rgb(1,119,69));

    font-weight: bold;

  }

  .SectionImgM{

    margin-top: 2%;

    margin-bottom:2%;

    width:30%;

    height: auto;

    display: block;

    margin-left: auto;

    margin-right: auto;

  }

  .SectionAboutM{

    float: left;

    width: 80%;

    margin-left: 10%;

    padding-top: 2%;

    padding-bottom: 2%;

    text-align: center;

    font-size: 1em;

    line-height: 2em;

    color: rgb(42,42,42);

    text-shadow: 0.1px 0.1px 1px black;

  }

  

  .PillarHolderTitleM{

    width:100%;

    height: auto;

    float: left;

    color:white;

    margin-bottom: 5%;

    text-shadow: 0.1% 0.1% 3px black;

    font-size: 2.5em;

    text-align: center;

    letter-spacing: 0.2em;

  }

  .TopNavigationM{

    position: fixed;

    height: 51px;

    width: 100%;

    top: 0%;

    box-shadow: 2px 2px 2px black;

    background-color: rgb(22,22,22);

    z-index: 129;

    transition: all .2s ease;

    animation: fadein 1s;

  }

  .logoContainerM {

      width: 25%;

      float: left;

      height: 100%;

      margin-left: 5%;

      margin-top: 0.1%;

      transition: all .2s ease;

      animation: fromTopSmall .3s;

  }

  .MainJMLogoM {

      width: auto;

      float: left;

      height: 60px;
      padding-top:1px;
      margin-top:-1%;
      cursor: pointer;

      transition: all .4s ease;

      animation: fromTopSmall .3s;

  }

  .bulletM{

    height:auto;

    width: 80%;

    float: left;

    margin-left: 10%;

    color: rgb(42,42,42);

    font-size: 1.2em;

    line-height: 2em;

    list-style-type: disc;

    list-style-position: inside;

    text-indent: -1.5em;

  

  }

  .SinglePrayerM{

      width: 100%;

      height: auto;

      float: left;

      /* margin-left: 10%; */

      margin-top: 1%;

  }

  .imgSingleM {

      position: absolute;

      top: 0%;

      bottom: 0%;

      right: 0%;

      left: 0%;

      width: 100%;

      height: 90%;

      z-index: 2001;

      animation: 0.7s fromBottom2;

      background-size: contain;

      background-position: center center;

      background-repeat: no-repeat;

      background-color: black;

      text-align: center;

  }

  .XM{

    height: 20px;

    width: 20px;

    Top: 5px;

    position: fixed;

    right: 5px;

    cursor: pointer;

    z-index: 2002;

    transition: all .25s ease-in-out;

  }

  .XM:hover{

    border-radius: 50%;

    padding: 1% 1% 1% 1%;

    transform: scale(1.1);

    background-color: blue;

    box-shadow: 2px 2px 8px black;

  }

  .profileHeaderM{

      width: 100%;

      height: auto;

      float: left;

      margin-top: 3%;

      box-shadow: 2px 2px 6px silver;

  }

  .bannerContainerM {

      width: 100%;

      height: 35%;

      float: left;

      background-image: linear-gradient(rgb(1,119,69), rgb(255,255,255));

  }

  .ProfilePictureM{

      width: 20%;

      height: 10%;

      overflow: hidden;

      float: left;

      border-radius: 50%;

      /* margin-left: 2%; */

      margin-top: -2%;

      background-position: center center;

      background-size: 100% auto;

      background-repeat: no-repeat;

  }

  .UserCoaninterM {

      width: 80%;

      height: auto;

      float: left;

  }

  .ButtonCoaninterM {

      width: 100%;

      height: auto;

      float: left;

      margin-top: 3%;

  }

  .profilemenuOptionsM {

      width: 100%;

      height: auto;

      float: left;

      background-color: white;

      padding-bottom: 1%;

  }

  .profileBannerElementM {

      width: 100%;

      height: 100%;

      float: left;

      background-position: center center;

      background-size: 100% auto;

      background-repeat: no-repeat;

  }

  .UserContentM{

    width:100%;

    height: auto;

    float: left;

    background-color: white;

    border-bottom: 1px solid silver;

    padding-bottom: 1%;

  }

  .AboutM{

    width:100%;

    height:auto;

    float:left;

  }

  .photoM {

      width: 48%;

      margin-left: 1%;

      margin-right: 1%;

      height: 28%;

      border-radius: 10px;

      box-shadow: 1px 1px 3px silver;

      float: left;

      background-position: center center;

      background-size: 100% auto;

      background-repeat: no-repeat;

      background-color: rgba(0, 0, 0, 0.4);

      margin-top: 1%;

      transition: all .4s ease;

      cursor: pointer;

  }

  .ChannelPicContainerSmallM {

      width: 20%;

      height: auto;

      float: left;

      margin-top: 2%;

      margin-bottom: 3%;

  }

  .YTVideoTitleM {

      width: 80%;

      height: auto;

      float: left;

      margin-top: 2%;

      color: white;

      font-size: 1.6em;

  }

  .VideoDateSmallM {

      width: 80%;

      height: auto;

      margin-top: 3%;

      margin-bottom: 2%;

      margin-left: 10%;

      color: white;

      font-size: 0.7em;

  }

  .VideoDesCriptionM {

      width: 90%;

      margin-left: 5%;

      margin-top: 2%;

      height: auto;

      color: white;

      padding-top: 1%;

      margin-top: 1%;

      font-size: 0.9em;

      float: left;

  }

  .CommentContainerTitleM {

      width: 100%;

      margin-top: 10%;

      padding-bottom: 1%;

      border-bottom: 0.5px solid silver;

      height: auto;

      color: white;

      font-size: 1.3em;

  }

  .AddCommentContainerInputM {

      width: 80%;

      height: auto;

      padding-top: 2%;

      margin-top: 2%;

      float: left;

      background-color: unset;

      color: white;

      outline: none;

      border: none;

      transition: all 300ms linear;

      font-size: 1.2em;

  }

  .AddCommentContainerButtonM {

      width: 40%;

      height: 30px;

      margin-top: 15%;

      margin-bottom: 4%;

      display: none;

      padding: 1% 1% 1% 1%;

      margin-left: auto;

      margin-right: auto;

      transition: all .4s ease;

      text-align: center;

      color: white;

      font-size: 1.2em;

      background-color: #4c5667 !important;

      border: 1px solid #4c5667 !important;

      border-radius: 3px;

      outline: none !important;

      box-shadow: 2px 2px 6px black;

      cursor: pointer;

  }

  .PageTitle2 {

      width:auto;

      height: auto;

      display: block;

      margin-left: auto;

      margin-right: auto;

      text-align: center;

      margin-left: 1%;

      margin-top: 0.5%;

      font-size: 2em;

      color: white;

  }

  .optSmall2 {

      width: auto;

      height: auto;

      margin-top: 1.5%;

      margin-left: 3%;

      float: left;

      color: white;

      text-align: center;

      font-size: 1.4em;

      text-decoration: none;

      transition: all .2s ease;

      animation: fadein 3s, fromTop .4s, colorShiftToWhite 2s;

  }

  .EventHolderM{

    animation: .3s slide-upLink;

    margin-top: 0%;

    line-height: 3em;

    background-color: #F5F5F5;

    border: 5px solid rgb(0,50,29);

    border-radius: 0.5em;

    height: 95%;

    overflow-Y: auto;

    overflow-X: hidden;

    padding-bottom: 2%;

    margin-top: 5%;

    margin-left: 2.5%;

    width: 90%;

    background-color: white;

    float: left;

    box-shadow: 2px 2px 6px black;

  }