* { box-sizing: border-box;
    margin: 0; } 

.newsfeed { margin-right: 150px; }

#jemmodulewide {  display: grid;
                  grid-column-start: 1;
                  grid-column-end: 5;
                  margin-top: 20px;
                  margin-bottom: 20px;
                  margin-left: 75px;
                 /* margin-left: 100px;
                  margin-top: 20px;
                  margin-bottom: 20px;
                  margin-right: 100px; */}
#eventcalq123 { display: grid;
                 grid-column-start: 5;
                 grid-column-end: 8; } 
#eventcalq123 table { display: grid;
                      justify-self: center;
                      align-self: center;
                    margin-left: -150px; } 
#middlebottom { display: grid;
              grid-template-columns: repeat(7, 1fr); }
#eventcalq123 .caption-top { font-family: "Funnel Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-size: 1vw;
    padding: 5px; }
#eventcalq123 th { font-size: .75vw;
                 padding: 5px; }
#eventcalq123 td { font-size: .75vw;
                 padding: 10px; }
#component #jem { margin-left: 50px;
                margin-right: 50px; }
.venue_country { display: none; }
.venue_country img { display: none; }
.jem-info, .jem-description, .jem-dl { font-family: "Funnel Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-size: 1.20vw; }
.buttons > div { width: 20%; }

p { font-family: "Funnel Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-size: 1vw; }

main { display: grid;
       grid-template-columns: repeat(7, 1fr);
       grid-template-rows: repeat (7, 1fr); }

/* -------------- GRID LAYOUT -------------- */
header { display: grid;
         grid-template-columns: repeat(1, 1fr);
         justify-items: center; }

#top { display: grid;
       grid-row: 1;
       grid-column-start: 1;
       grid-column-end: 8;
       background-color: white; }
#middletop { grid-row: 2;
             grid-column-start: 1;
             grid-column-end: 8;
             background-color: #A0B977; }
#component { grid-row: 3; 
             grid-column-start: 1;
             grid-column-end: 6;
             background-color: white; }
#middle { grid-row: 3;
          grid-column-start: 6;
          grid-column-end: 8; 
          background-color: white; }
#middlebottom { grid-row: 4;
                grid-column-start: 1;
                grid-column-end: 8; 
                background-color: #e3b86f; }
#bottomtop { grid-row: 5;
             grid-column-start: 1; 
             grid-column-end: 8;
             background-color: white; }
#bottombottom { display: grid;
                grid-row: 6;
                grid-column-start: 1; 
                grid-column-end: 8;
                background-color: white; }
#footer { grid-column-start: 1; 
          grid-column-end: 8;
          position: fixed;
          background-color: #e3b86f;
          bottom: 0px;
          right: 0px;
          left: 0px;
          height: 50px; } 
/* ----------------------------------------- */
#footer { grid-column-start: 1; 
          grid-column-end: 8;
          position: fixed;
          background-color: #e3b86f;
          bottom: 0px;
          right: 0px;
          left: 0px;
          height: 50px; }
#banner { display: grid; 
          grid-column-start: 1;
          grid-column-end: 8; }  
#banner > #mod-custom110, #mod-custom111 { 
  grid-column-start: 1;
  grid-column-end: 2; 
  grid-row-start: 1;
  grid-row-end: 2; }
#banner > #mod-custom112, #mod-custom113 { 
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2; }
#banner > #mod-custom114, #mod-custom115 { 
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2; }

#mod-custom111, #mod-custom113, #mod-custom115 { 
  display: none;
  z-index: 1; }
#mod-custom110, #mod-custom112, #mod-custom114 { 
  z-index: 1; }

/* BACKGROUND VIDEO */
#mod-custom132 video { 
  min-width: 100%;
  min-height: 100%; 
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translateX(-50%) translateY(-50%);
  object-fit: cover; }
#mod-custom132 { 
  height: 500px;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -5; }
  .mod-custom figcaption {
    text-align: center;
  font-family: "Akaya Kanadaka", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size:1.25em; }

div #mod-custom135 { display: none; }

/* -------------- NAVIGATION -------------- */
nav { background-color: #e3b86f;
      margin-top: 20px;
      margin-bottom: 15px; 
      grid-column-start: 1; 
      grid-column-end: 8; 
      width: 100%;
      justify-items: center; }
nav ul { display: grid;
         grid-template-columns: repeat(4, 1fr);
         padding: 20px;
         margin-top: -10px;
         margin-bottom: -25px;
         margin-left: auto;
         margin-right: auto;
         justify-self: center;
         text-align: center; }
nav li { list-style-type: none;
         justify-self: center;
         border: black solid 4pt;
         background-color: white;
         height: 110px;
         width: 275px;
         border-radius: 20px; 
         font-family: "Cal Sans", sans-serif;
         font-weight: 400;
         font-style: normal;
         font-size: 1.55em;
         margin-left: 50px;
         padding-top: 20px;
         padding-right: 15px;
         padding-bottom: auto;
         margin-bottom: 15px; }
nav li a { text-decoration: none; }
nav img { float: left;
          height: 150px;
          width: auto;
          margin-left: -40px;
          margin-top: -30px; }
/* -------------- SPECIAL BULLETIN --------------*/
 #bulletin { position: fixed;
            top: 20px;
            right: 20px;
            background-color: white;
            width: 250px;
            height: auto; 
            padding: 10px 20px 10px 10px;
            margin-right: 100px;
            z-index: 2; }

#bulletin img { width: 160px;
                height: auto;
                position: absolute; 
                margin-top: -100px;
                margin-left: 150px; } 
/* -----------------------------------------------*/

/* --------------WORD OF WELCOME -------------- */
#mod-custom117 { display: grid;
                 margin: 15px 20px 20px 10%;
                 grid-column-start: 1;
                 grid-column-end: 4; }
#mod-custom117 img { float: left;
                   margin-right: 20px; 
                   width: 35%;
                   height: auto; }
#mod-custom117 h1 { font-size: 1.55vw;
                  text-transform: uppercase; }
#mod-custom117 p { font-size: 1.3vw; }   
/* --------------------------------------------- */

/* -------------- WHO WE ARE --------------*/
#mod-custom118 { grid-column-start: 4;
                 grid-column-end: 8;
                 border: solid 1pt black;
                 border-radius: 15px 15px 0px 15px;
                 padding: 20px 0px 0px 20px;
                 margin: 15px 10% 15px 50px; }
#mod-custom118 img { float: right;
                     width: 40%;
                     float: right; 
                     shape-outside: url(https://umcmi.com/images/womanheart.png);
                     height: auto;
                     margin-top: 30px; }
#mod-custom118 p { font-size: 1.3vw; }
#mod-custom118 h1 { text-transform: uppercase; } 
/* ----------------------------------------*/

/* -------------- TIMES OF WORSHIP -------------- */
#mod-custom119 { display: grid;
                 grid-template-columns: repeat(3, 1fr);
                 column-gap: 5%;
                 justify-content: center;
                 padding-left: 5%;
                 padding-right: 5%;
                 margin: 15px 0px;
  font-size: 1.7vh;
               text-align: center;
               justify-items: center; }
#mod-custom119 h1 {
  grid-column-start: 1;
  grid-column-end: 4;
}
#mod-custom119 h2 { color: #EE574A; }
#mod-custom119 p { font-family: "Funnel Sans", sans-serif;
                   font-optical-sizing: auto;
                   font-weight: 200;
                   font-style: normal; }
#mod-custom119 > div {                    
  text-align: center; 
  justify-items: center;
  
                    
                     background-color: #D8EFB5;
                     border: solid black 1pt;
                     border-radius: 15px; 
                     margin: 10px 4%;
                     padding: 20px 20px; } 
/* ---------------------------------------------- */



/* -------------- MEET OUR PASTOR -------------- */
#component { padding: 20px;
           grid: inline-grid; }
#component img { width: 70%;
               height: auto;
               border: black 1pt solid;
               margin-top: 20px; }

#component figure { float: left;
                    width: 50%; }
#component caption { font-size: 1vw; }

#component .com-content-article__body { float: left;
                                      margin-top: 20px;
                                      width: 50%; }
#component .page-header > h1 { text-align: center; 
                        font-size: 2vw; }
#component button { border: 2pt black solid;
                    border-radius: 5px;
                    padding: 10px;
                    font-size: .75vw;
                    margin: 10px 0px;
                    background-color: lightgray;
                    text-transform: uppercase;
                    box-shadow: 4px 4px lightgray; }
#component button:hover { box-shadow: none; } 



ul li .feed-item-description { font-family: "Dancing Script", serif;
                               font-weight: 700;
                               font-style: normal;
                               font-size: 1.3vw;
                               margin-bottom: 20px; } 
#bottombottom h2 { font-family: "Crimson Text", serif;
                   font-weight: 700;
                   font-style: normal;
                   font-size: 1.3vw;
                   text-transform: uppercase;} 







/* -------------- FACEBOOK LINKS -------------- */
#middle { align-items: start;
          align-content: start;
          display: grid;
          /* grid-template-rows: repeat(1, 1fr); */
          justify-items: center;
          background-color: #A4B8F3;
         }

#middle img { float: left;
  width: 30%; 
              height: auto;
              padding: 0px 20px 0px 0px; }
#middle .mod-custom { border: solid 7pt #444ad4;
                      box-shadow: 10px 7px 7px lightgray;
                      border-radius: 15px;
                      width: 80%;
                      padding: 20px;
                      margin-top: 30px; 
                      font-family: "Hammersmith One", sans-serif;
                      font-weight: 400;
                      font-style: normal; 
                      font-size: 1.15vw;
                      background-color: white; } 

/* -------------- EVENT LIST AND CALENDAR -------------- */


/* ----------------------------------------------------- */

#mod-custom127 { padding: 0px 50px; }
#mod-custom127 p { font-size: 1.25vw;
                 margin-top: 20px; }
#mod-custom127 img { margin-right: 20px;
                   margin-top: -20px; }





#middlebottom ul { font-family: "Funnel Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-size: 1vw; }

#jemmodulewide { background-color: #7CC08F }



h1 {
  font-family: "Crimson Text", serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.3vw;
  text-transform: uppercase;
}







#body { margin-bottom: 50px; }  



#banner img { width: 80%;
            height: auto; } 

#mod-custom110, #mod-custom111 { margin-top: 0px;
                               z-index: 2; } 
figure { text-align: center; }




#top > .mod-custom { float: left; } 


#bottombottom { margin: 20px 100px; }








#mod-custom127 { border: 1pt solid black;
           padding: 20px;
               margin: 20px 100px; }
#mod-custom127 img { padding-right: 20px; } 

#bottombottom { font-size: 1.5vh; }
#bottombottom button { border: 2pt black solid;
                    border-radius: 5px;
                    padding: 10px;
                    font-size: .75vw;
                    margin: 10px 0px;
                    background-color: lightgray;
                    text-transform: uppercase;
                    box-shadow: 4px 4px lightgray; }
#bottombottom button:hover { box-shadow: none; }
#mod-custom129 { text-align: center;
               grid-column-start: 4;
               grid-column-end: 8; }

#bottombottom .feed { grid-column-start: 1; 
                      grid-column-end: 4; }
footer { display: grid;
                  grid-template-columns: repeat(7, 1fr);
                  grid-template-rows: (1fr);
                  justify-content: center; }             
             
             .mod-footer { display: block;
  position: relative; 
  color: white;
         z-index: 10;
         top: 10px;
          justify-items: center;
          
          font-family: "Cal Sans", sans-serif;
          font-weight: 400;
        
          font-style: normal;
          font-size: 1.5vh; }



.footer2 { display: none; }