/* This sets up webpage layout */

.grid-container {
   display: grid;
   max-width:100%;
   grid-template-areas:
    'header'
    'menu'
    'intro'
    'info9'
    'info10'
    'slides'
    'info1'
    'info2'
    'info3'
    'info4'
    'info6'
    'info8'
    'slide-container'
    'footer';
    grid-template-columns: 1fr;
    grid-gap: var(--main-grid-gap);
    grid-border-radius: var(--main-grid-border-radius);
    background-color: var(--main-bodybkgrnd-color);
}


@media only screen and (min-width: 580px)   {
.grid-container {
  display: grid;
  max-width:100%;
  grid-template-areas:
    'header'
    'menu'
    'intro'
    'info9'
    'info10'
    'slides'
    'info1'
    'info2'
    'info3'
    'info4'
    'info6'
    'info8'
    'slide-container'
    'footer';
    grid-template-columns: 1fr;
    grid-gap: var(--main-grid-gap);
    grid-border-radius: var(--main-grid-border-radius);
    background-color: var(--main-bodybkgrnd-color);
}
}

@media only screen and (min-width: 800px)   {
.grid-container {
  display: grid;
  max-width:100%;
  grid-template-areas:
	'header menu menu menu menu menu menu'
	'info9 info9 info9 intro info10 info10 info10'
	'info9 info9 info9 slides info10 info10 info10'
    'info1 info1 info1 info1 info1 info1 info1'
    'info2 info2 info2 info2 info2 info2 info2'
    'info3 info3 info3 info3 info3 info3 info3'
    'info4 info4 info4 info4 info4 info4 info4'
    'info6 info6 info6 info6 info6 info6 info6'
    'info8 info8 info8 info8 info8 info8 info8'
    'slide-container slide-container slide-container slide-container slide-container slide-container slide-container'
    'footer footer footer footer footer footer footer';
    grid-template-columns: 1fr 1fr 1fr 40% 1fr 1fr 1fr;
    grid-gap: var(--main-grid-gap);
    grid-border-radius: var(--main-grid-border-radius);
    background-color: var(--main-bodybkgrnd-color);
}
}


@media only screen and (min-width: 1200px)   {
.grid-container {
  display: grid;
  max-width:100%;
  grid-template-areas:
	'header menu menu menu menu menu menu'
	'info9 info9 info9 intro info10 info10 info10'
	'info9 info9 info9 slides info10 info10 info10'
    'info1 info1 info1 info1 info1 info1 info1'
    'info2 info2 info2 info2 info2 info2 info2'
    'info3 info3 info3 info3 info3 info3 info3'
    'info4 info4 info4 info4 info4 info4 info4'
    'info6 info6 info6 info6 info6 info6 info6'
    'info8 info8 info8 info8 info8 info8 info8'
    'slide-container slide-container slide-container slide-container slide-container slide-container slide-container'
    'footer footer footer footer footer footer footer';
    grid-template-columns: 1fr 1fr 1fr 45% 1fr 1fr 1fr;
    grid-gap: var(--main-grid-gap);
    grid-border-radius: var(--main-grid-border-radius);
    background-color: var(--main-bodybkgrnd-color);
}
}

/*
.videowrapper {
   display: flex;
   justify-content: center;
}

.videowrapper > iframe {
    padding: 0.5rem;
}

.grid-container > div {
  font-size: var(--main-text-size);
}
*/

.intro {
  position: relative;
  grid-area: intro;
  color: var(--main-intro-color);
  --animate-duration: 2s;
  --animate-delay: 1s;
  font-size: var(--main-text-size);
  border-radius: var(--main-grid-border-radius);
  /* background-color: red; */
}

.intro img {
  border-radius: var(--main-grid-border-radius);
}


.intro div {
  margin: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  @media only screen and (max-width: 580px) { top: 40%; }
}

.intro button {
  margin: 0px;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  outline: 20px;
  padding: 10px 10px;
  font-size: var(--main-text-size);
  cursor: pointer;
  border-radius: 5px;
  border: 5px black;
  color: white;
  background-color: lightgrey;
}

.intro button:hover {
  color: white;
  background-color: #555;
}


/* ----------------------------------------------------------- */
/* Display either the intro video on desktop or image on phone */
/* Default  (desktop)                                          */
/* ----------------------------------------------------------- */
#intro-Video {
  display: none;
}

#intro-Image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
} 
  
/* Mobile screens */
@media only screen and (max-width: 800px) {
  #intro-Video {
    display: none;
  }

#intro-Image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }
}


.flex-h {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
    flex-wrap: wrap;
}


.flex-h > div {
    text-align: center;
}


.worship {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0px;
    gap: 20px;
    justify-content: center;
    align-items: center;
}


/* --------------------------------------- */
/* Info 1  Wednesday Evenings              */
/* --------------------------------------- */
.info1 {
  grid-area: info1;
  padding: 15px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background-color: tan;
}

.info1 img {
  max-width: 350px;
  @media (max-width: 600px) { max-width: 280px;}
}

.info1 h2 {
  margin-bottom: 7px;
  text-align: center;
}

.info1 p {
  align-items: center;
  padding: 10px;
}


/* --------------------------------------- */
/* Info 2 Worship & Bible Study            */
/* --------------------------------------- */
.info2 {
  grid-area: info2;
  align-items: center;
  gap: 10px;
  padding: 15px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background: linear-gradient(to right, white, 80%, pink);
  /* background-color: lightblue; */
}

.info2 h2 {
  margin-bottom: 7px;
  text-align: center;
}

.info2 img {
  max-width: 350px; 
  width: 50%;
  display: inline-block;
  @media (max-width: 600px) { max-width: 250px;}
}

.info2 p {
  margin-bottom: 7px;
  text-align: left;
  /* background-color: yellow; */
}

.info2 iframe {
  float: left;
  width: 400px;
  height: 200px;
  padding: 10px;
  border: 5px solid black;
  @media (max-width: 600px) { max-width: 280px;}
}

.info2 text {
  float: center;
  align-items: center;
  width: 50%;
  padding: 20px;
  margin: 0px;
}

.info2 clear {
  clear: both;
}


/* --------------------------------------- */
/* Info 3                                  */
/* --------------------------------------- */
.info3 {
  grid-area: info3;
  text-align: center;
  padding: 15px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background: linear-gradient(to right, green, 20%, white);
}

.info3 img {
  max-width: 350px;
  width=50%;
  float:right;
  display: inline-block;
  @media (max-width: 600px) { max-width: 250px;}
}

.info3 h2 {
  margin-bottom: 7px;
  text-align: center;
}


.info3 p {
  margin-bottom: 7px;
  align-items: center;
  vertical-align: middle;
}


.info3 button {
  background-color: #f44336;
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 10px;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.info3 button:hover {
  background-color: #d32f2f;
}



/* --------------------------------------- */
/* Info 4                                  */
/* --------------------------------------- */
.info4 {
  grid-area: info4;
  background-color: lightblue;
  text-align: center;
  padding: 15px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background: linear-gradient(to right, indigo, 50%, violet);
}

.info4 img {
  max-width: 350px;
  width: 35%;
  float: center;
  display: inline-block;
  @media (max-width: 600px) { width: 90%; max-width: 300;}
}

.info4 h2 {
  margin-bottom: 7px;
  text-align: center;
}

.info4 p {
  margin-bottom: 7px;
  align-items: center;
}

.info4-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  @media (max-width: 600px) { display: inline-block; float: center;}
}

/* --------------------------------------- */
/* Info 6                                 */
/* --------------------------------------- */
.info6 {
  grid-area: info6;
  padding: 15px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  text-align: center;
  background-color: white;
}


.info6 h2 {
  margin-bottom: 7px;
  text-align: center;
}

.info6 p {
  margin-bottom: 7px;
  align-items: center;
  text-align: center;
}


/* --------------------------------------- */
/* WHBC Calendar                           */
/* --------------------------------------- */
.info7 {
  grid-area: info7;
  text-align: center;
  padding: 15px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background-color: white;
}


.info7 h2 {
  margin-bottom: 7px;
  text-align: center;
}

.info7 p {
  margin-bottom: 7px;
  align-items: center;
  text-align: center;
}


.info7 iframe {
   border-width:0;
   width: 80%;
   height: 380px;
   frameborder: 0;
   scrolling: no;
   padding: 20px;
   background-color: yellow;
   @media only screen and (max-width: 600px) { 
      width: 95%;
   }
}

/* --------------------------------------- */
/* Info 8                                 */
/* --------------------------------------- */
.info8 {
  grid-area: info8;
  text-align: center;
  padding: 15px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background-color: orange;
}


.info8 h2 {
  margin-bottom: 7px;
  text-align: center;
}

.info8 p {
  margin-bottom: 7px;
  align-items: center;
  text-align: center;
}


.info8 iframe {
   border-width:0;
   height: 420px;
   frameborder: 0;
   scrolling: no;
   padding: 20px;
   @media only screen and (max-width: 600px) {  
      width: 90vw;
   }
}

.fb-page {
    border-width:0;
    width: 350px;
    height: auto;
    padding: 0px;
    background-color: white;
    @media only screen and (max-width: 600px) { 
      width: 85vw;
    }
}

.insta-page {
    width: 350px;
    height: 400px;
    padding: 0px;
    background-color: white;
    @media only screen and (max-width: 600px) { 
      width: 85vw;
    }
}

.social {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: center;
    align-items: center;
}


/* --------------------------------------- */
/* Info 9                                 */
/* --------------------------------------- */
.info9 {
  grid-area: info9;
  text-align: center;
  align-items: center;
  padding: 15px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background: linear-gradient(to bottom right, lightblue, 50%, mediumblue);
  @media only screen and (max-width: 600px) {
  }
}

/* --------------------------------------- */
/* Info 10                                 */
/* --------------------------------------- */
.info10 {
  grid-area: info10;
  text-align: center;
  padding: 15px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background: linear-gradient(to bottom left, lightblue, 50%, mediumblue);
  @media only screen and (max-width: 600px) {
  }
}

.info10 iframe {
    border: 0;  
    height: 400px; 
    width: 100%;
    align-items: center;
    @media only screen and (max-width: 600px) { width: 100%; }
}