/* imports fonts used */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300&family=Montserrat:wght@100;300&family=Poppins:wght@100;200;400&display=swap');
/* changes body colour for all pages */
body {
  background-color: #f7f5ee
}

header {
  width: 100%;
  float: center;
  position: relative;
}
/* TITLE above navbar for all pages */
@media only screen and (min-width: 1051px) {
header .title p {
  text-align: center;
  margin: 0;
  padding-top: 20px;
	color: black;
  font-family: 'Poppins', 'sans-serif';
  font-size: 40px;
  font-weight: 200;
}
}
/* anywhere with '@media' are the different 
designs across mobile and desktop versions */
@media only screen and (max-width: 1050px) {
header .title p{
  margin: 0;
  padding-top: 10px;
	color: black;
  font-family: 'Poppins', 'sans-serif';
  font-size: 40px;
  font-weight: 200;
  /* align title to left for mobile */
  text-align: left;
  padding-right: 70px;
}
}
/* shrink fonts for mobile */
@media only screen and (max-width: 465px) {
  header .title p{
  font-size: 30px;
  }
}
@media only screen and (max-width: 370px) {
  header .title p{
  font-size: 25px;
  }
}
/*NAVBAR*/
/* have navigation navbar display in the middle top */
.navigation li {
  display: inline-block;
}
/* hide main navbar for mobile */
@media only screen and (max-width: 1050px) {
  .navigation ul {
  display: none;
}}

.navigation li a {
  display: block;
  color: black;
  text-decoration: none;
  padding: 10px;
}
.navigation ul {
  font-family: 'Montserrat', sans-serif;
  margin-top: 85px;
  list-style-type: none;
  overflow: auto;
  text-align: center;
  border-top: 1px solid black;
  width: 75%;
  /* placement */
  position: absolute;
  top: 0;
  left: 50%; 
  /* Place it horizontally in the middle */
  transform: translate(-50%);
}


/* HEADER Menu button (mobile substitute for navbar) */
/* disappear when screen is big */
@media only screen and (min-width: 1051px) {
  header .dropdown span {
  display: none;
  }
}
/* display menu button with small width */
@media only screen and (max-width: 1050px) {
  header .dropdown span {
  position: absolute;
  font-size: 50px; 
  padding: 6px 10px;
  right: 10px;
  top: 3px;
  cursor: pointer;
  color: rgb(41, 40, 40);
  background: none;
  border: none;
  }
}
/* recreate navbar (dropdown) */
/* drop down (navbar for mobile)*/
/* disapear when too wide */
@media only screen and (min-width: 1051px) {
  .dropdown ul{
    display: none;
  }
}

/* put it to the right when width is too small */
@media only screen and (max-width: 1050px) {
  .dropdown ul {
  font-family: 'Montserrat', sans-serif;
  margin-top: 90px;
  list-style-type: none;
  overflow: auto;
  text-align: center;

  padding: 10px;

  background: #f7f5ee;
  border: 1px solid grey;
  border-radius: 30px;
  border-bottom-left-radius: 30px;

  /* position */
  position: absolute;
  right: 0px;
  top: 15px;
  z-index: 1;
  }
}
@media only screen and (max-width: 465px) {
  .dropdown ul {
  font-size: 15px;
  }
}

/* permanent features */
@media only screen and (max-width: 1050px) {
.dropdown li a {
  display: block;
  color: black;
  text-decoration: none;
  padding: 10px;
}}
@media only screen and (max-width: 465px) {
  .dropdown li a {
  padding: 5px;
}}

/* button content */
.dropdown-content {
  display: none;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown a:hover {
  background-color: lightgrey;
  border-radius: 30px;
}


/* animation on banner image for all pages*/
@media only screen and (min-width: 1051px) {
  #bannerIndex{
    background-position: 0% -128px;
  }
  #bannerAbout{
    background-position: 0% -128px;
  }
  #bannerContact{
    background-position: 0% -128px;
  }
  #bannerGroups{
    background-position: 0% -128px;
  }
  #bannerHistory{
    background-position: 0% -128px;
  }
  #bannerLeadership{
    background-position: 0% -128px;
  }
}
/* Main banner image */
.banner {
  background-size: 100%;
  background-image: url(images/banner.jpg);
  margin-top: 70px;

  width: 100%;
  /*placement */
  position: absolute;
  left: 50%; 
  /* Place it horizontally in the middle */
  transform: translate(-50%);
}
@media only screen and (max-width: 350px) {
  .banner {
  background-size: 130%;
}}

@media only screen and (max-width: 1050px) {
  .banner {
  margin-top: 30px;
    /* this element takes priority */
  background-position: 0% 20% !important;
  }
}

/* "for christ in the cuminty */
@media only screen and (min-width: 1051px) {
.banner .subtitle{
  text-align: center;
  padding-bottom: 60px;
  font-family: 'Merriweather', 'sans-serif';
  font-size: 20px;
  color: #f7f5ee;
}}

@media only screen and (max-width: 1050px) {
  .banner .subtitle{
  padding-bottom: 30px;
  font-family: 'Merriweather', 'sans-serif';
  font-size: 15px;
  color: #f7f5ee;
  padding-left: 25px;
}}
@media only screen and (max-width: 457px) {
  .home .banner .subtitle{
  display: none;
}}

/* main title in banner WELCOME TO HAURAKI PLAINS... etc */
@media only screen and (min-width: 1051px) {
.banner .header{
  text-align: center;
  font-family: 'Poppins', 'sans-serif';
  font-size: 60px;
  color: #f7f5ee;
  padding-bottom: 40px;
}}
@media only screen and (max-width: 1050px) {
  .banner .header{
  font-family: 'Poppins', 'sans-serif';
  font-size: 40px;
  color: #f7f5ee;
  padding-left: 25px;
  padding-bottom: 20px;
}}
@media only screen and (max-width: 474px) {
  .banner .header{
  font-size: 30px;
}}
@media only screen and (max-width: 569px) {
  .home .banner .header{
  font-size: 26px;
}}
/* --- end of HEADER --- */


/* INDEX/HOME page main content */
/*change height from top of screen */
@media only screen and (min-width: 1051px) {
.services{
  margin-top: 560px;
}}
@media only screen and (max-width: 1050px) {
.services{
  margin-top: 400px;
}}
@media only screen and (max-width: 569px) {
.services{
  margin-top: 320px;
}}
@media only screen and (max-width: 457px) {
.services{
  margin-top: 260px;
}}
/* SERVICES AND MINISTRY */
@media only screen and (min-width: 570px) {
.services p{
  font-family: 'Poppins', 'sans-serif';
  font-size: 40px;
  color: black;
  text-align: center;
}}
@media only screen and (max-width: 569px) {
.services p{
  font-family: 'Poppins', 'sans-serif';
  font-size: 28px;
  color: black;
  text-align: center;
}}
/* to create collumns */
@media only screen and (min-width: 1051px) {
.main_section_collumn {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10%;
  row-gap: 25px;
  width: 80%;
  margin: 0 auto;
}}
@media only screen and (max-width: 1050px) {
.main_section_collumn {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 5%;
  row-gap: 25px;
  width: 97.5%;
  margin: 0 auto;
}}
@media only screen and (max-width: 569px) {
.main_section_collumn {
  grid-template-columns: repeat(2, 1fr);
}}
@media only screen and (max-width: 474px) {
.main_section_collumn {
  grid-template-columns: repeat(1, 1fr);
}}
/* headers for different services */
.main_section_collumn h2{
  font-weight: 500;
  margin-bottom: 20px;
  margin-top: 20px;
  font-family: 'Poppins', 'Calibri';
  font-size: 22px;
}
/* all small images */
.main_section_collumn img {
  margin-top: 0px;
  padding-top: 0px;
  height: auto;
  width: 100%;
  border-radius: 30px;
}
/* collum paragraphs */
.main_section_collumn p {
  font-family: 'Merriweather', 'sans-serif';
  font-size: 15px;
  text-align: left;
  line-height: 25px;
  margin-bottom: 0;
}


/* title used on leasdership page, 
sets margin from the top */
@media only screen and (min-width: 1051px) {
.leadership_title p{
  margin-top: 450px;
  
  font-family: 'Poppins', 'sans-serif';
  font-size: 40px;
  color: black;
  text-align: center;
  padding-bottom: 0;
  margin-bottom: 0;
}}
@media only screen and (max-width: 1050px) {
.leadership_title p{
  margin-top: 260px;
  
  font-family: 'Poppins', 'sans-serif';
  font-size: 40px;
  color: black;
  text-align: center;
  padding-bottom: 0;
  margin-bottom: 0;
}}
@media only screen and (max-width: 569px) {
.leadership_title p{
  font-size: 28px;
}}
@media only screen and (max-width: 474px) {
.leadership_title p{
  margin-top: 230px;
}}

/* LEADERSHIP section, creates 4 collumns */
@media only screen and (min-width: 1001px) {
.leadership_collumn {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2%;
  row-gap: 25px;
  width: 97%;
  margin: 0 auto;
  text-align: center;
}}
/* change to 2 collumns */

@media only screen and (max-width: 1000px) {
.leadership_collumn {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 7%;
  row-gap: 25px;
  width: 70%;
  margin: 0 auto;
  text-align: center;
}}
@media only screen and (max-width: 830px) {
.leadership_collumn {
  grid-gap: 5;
  width: 80%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  row-gap: 25px;

  margin: 0 auto;
  text-align: center;
}}
@media only screen and (max-width: 700px) {
.leadership_collumn {
  grid-gap: 8%;
  width: 90%;
}}
@media only screen and (max-width: 600px) {
.leadership_collumn {
  grid-gap: 4%;
  width: 97%;
}}
/* only 1 collumn */
@media only screen and (max-width: 460px) {
.leadership_collumn {
  grid-template-columns: repeat(1, 1fr);
  row-gap: 15px;
  width: 75%;
}}
@media only screen and (max-width: 375px) {
.leadership_collumn {
  grid-template-columns: repeat(1, 1fr);
  width: 95%;
}}
/* NAMES OF LEADERS */
.leadership_collumn h2{
  font-weight: 500;
  margin-bottom: 2px;
  font-family: 'Poppins', 'Calibri';
  font-size: 22px;
}

/* ---UNUSED CODE--- */
/* Profile pictures (not used in final design, 
but left avalable if the church decides to add photos, 
for the meantime they have requested to have no photos) */
.leadership_collumn img{
  margin-top: 0px;
  padding: 0;
  height: 400px;
  width: 100%;

  border: 1px solid #454545;
  border-radius: 30px;
}
/*---*/

/* role text, and about text */
.leadership_collumn h3, .leadership_collumn p{
  font-family: 'Merriweather', 'sans-serif';
  line-height: 25px;
  margin-bottom: 0;
  margin-top: 3px;
}
/* roles */
.leadership_collumn h3 {
  color: #292929;
  font-size: 16px;
  font-weight: 600;
}
/* about information */
.leadership_collumn p {
  color: #454545;
  font-size: 15px;
  font-weight: 200;
  padding-bottom: 0;
}

/* ABOUT and HISTORY pages */
/* CSS for about and history main sections */
@media only screen and (min-width: 1051px) {
.history_about_main{
  margin-top: 450px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 10%;
  row-gap: 25px;
  padding-left: 5%;
  padding-right: 5%;
}}
@media only screen and (max-width: 1050px) {
.history_about_main{
  margin-top: 270px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 10%;
  row-gap: 25px;
  padding-left: 5%;
  padding-right: 5%;
}}
@media only screen and (max-width: 474px) {
.history_about_main{
  margin-top: 230px;
}}
/* used to divide the collumns */
.history_about_main .post{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2%;
  row-gap: 25px;
  width: 100%;
  margin: 0 auto;
}
/* Image of box, MORE STYLING in .html file. 
CSS for this element can also be found in the HTML files, 
this to make the images easier to keep consistent*/
.history_about_main .post .image{
  margin: 0;
  padding: 0;

  width: 100%;
  object-fit: cover;
  object-position: 0 90%;

  border: 1px solid Grey;
}
/* hide the image when screen is too small */
@media only screen and (max-width: 673px) {
.history_about_main .post .image{
  display: none;
}
/* overides HTML styling for mobile*/
.history_about_main .post .text{
  border-radius: 30px;
}
.history_about_main .post{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 2%;
  row-gap: 25px;
  width: 100%;
  margin: 0 auto;
}}
/* header for text */
.history_about_main .post h2{
  font-family: 'Poppins', 'Calibri';
  font-size: 20px;
  text-align: center;
  font-weight: 500;
  margin-bottom: 20px;
}
/* paragraph styling */
.history_about_main .post p{
  font-family: 'Merriweather', 'sans-serif';
  font-size: 15px;
  text-align: center;
  line-height: 22px;
}
/* shrink fonts for smaller screens */
@media only screen and (max-width: 1030px) {
.history_about_main .post p{
  font-family: 'Merriweather', 'sans-serif';
  font-size: 13px;
  text-align: center;
  line-height: 20px;
}}
@media only screen and (max-width: 1030px) {
.history_about_main .post h2{
  font-family: 'Poppins', 'Calibri';
  font-size: 18px;
  text-align: center;
  font-weight: 500;
  margin-bottom: 5px;
}}

@media only screen and (max-width: 760px) {
.history_about_main .post p{
  font-family: 'Merriweather', 'sans-serif';
  font-size: 11.5px;
  text-align: center;
  line-height: 20px;
}}
@media only screen and (max-width: 673px) {
.history_about_main .post p{
  font-family: 'Merriweather', 'sans-serif';
  font-size: 14px;
  text-align: center;
  line-height: 20px;
}}
/* box for the text, MORE STYLING in .html file */
.history_about_main .post .text{
  background-color: #f1ebdd;
  padding-left: 10%;
  padding-right: 10%;

  display: table-cell;
  vertical-align: middle;

  border: 1px solid Grey;
}
.post .table{
  display: table;
}

/* GROUPS PAGE */
/* GROUPS page, reused somewhat from history_about_main */
@media only screen and (min-width: 1051px) {
.groups_main{
  margin-top: 450px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 10%;
  row-gap: 25px;
  padding-left: 5%;
  padding-right: 5%;
}}
@media only screen and (max-width: 1050px) {
.groups_main{
  margin-top: 260px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 10%;
  row-gap: 25px;
  padding-left: 5%;
  padding-right: 5%;
}}
@media only screen and (max-width: 474px) {
.about_title p{
  margin-top: 230px;
}}

@media only screen and (min-width: 650px) {
.groups_main .post{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2%;
  row-gap: 25px;
  width: 100%;
  margin: 0 auto;
}}
.groups_main .post .image{
 margin: 0;
 padding: 0;

 width: 100%;
 object-fit: cover;
 object-position: 0 90%;

/* Heigth and radius in html*/
 border: 1px solid Grey;
}

@media only screen and (max-width: 694px) {
.groups_main .post .image{
  display: none;
}
  /* overrides HTML Styling */
.groups_main .post .text{
  border-radius: 30px;
}
.groups_main .post{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 2%;
  row-gap: 25px;
  width: 100%;
  margin: 0 auto;
}}
/* groups titles */
.groups_main .post h2{
  padding-top: 5px;
  font-family: 'Poppins', 'Calibri';
  font-size: 22px;
  font-weight: 500;
  padding-bottom: 0;
  margin-bottom: 0;
}
/* groups icons */
.groups_main .post h2 span{
  padding-right: 3px;
  vertical-align: middle;
}
/* different paragraph fonts for screens */
@media only screen and (min-width: 943px) {
.groups_main .post p{
  font-family: 'Merriweather', 'sans-serif';
  font-size: 15px;
  line-height: 30px;
  margin-top: 0;
}}
@media only screen and (max-width: 942px) {
.groups_main .post p{
  font-family: 'Merriweather', 'sans-serif';
  font-size: 12px;
  line-height: 24px;
  margin-top: 0;
}}
.groups_main .post .text{
  text-align: center;
  background-color: #f1ebdd;
  padding-left: 10%;
  padding-right: 10%;
  
  border: 1px solid Grey;
}

/* CONTACT page */
/* used to contain text but looked ugly, 
still needed to keep height from top of the 
page but the text is just empty lines*/
@media only screen and (min-width: 1051px) {
.contact_title p{
  margin-top: 450px;
  line-height: 25px;
}}
@media only screen and (max-width: 1050px) {
.contact_title p{
  margin-top: 260px;
  line-height: 25px;
}}
@media only screen and (max-width: 474px) {
.contact_title p{
  margin-top: 230px;
  font-size: 14px;
}}

/* main section, aligns the two collumns */
@media only screen and (min-width: 901px) {
.contact_main{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0;
}}
@media only screen and (max-width: 900px) {
.contact_main{
  display: grid;
  grid-template-columns: 17.5% 65% 17.5%;
  grid-gap: 0;
  width: 98%
}}
@media only screen and (max-width: 837px) {
.contact_main{
  grid-template-columns: 7.5% 85% 7.5%;
}}
@media only screen and (max-width: 643px) {
.contact_main{
  grid-template-columns: 0% 100% 0%;
}}

/* left collumn, with facebok */
.facebook{
  text-align: center;
}
/* embeded facebook page */
.facebook iframe{
  padding-left: 0;
  padding-right: 0;
  margin-right: 0;
}
/* different facebook elements hide and
show depending on screen width */
@media only screen and (min-width: 1071px) {
#facebook1 {
  display: inline;
}
#facebook2 {
  display: none;
}}
@media only screen and (max-width: 1070px) {
#facebook1 {
  display: none;
}
#facebook2 {
  display: inline;
}}
@media only screen and (max-width: 900px) {
#facebook2 {
  display: none;
}}


/* contact form */
@media only screen and (min-width: 901px) {
form{
  position: relative;
  width: 95%;
  font-family: 'Poppins', 'sans-serif';
  font-size: 20px;
  margin-right: 5%;
}}
@media only screen and (max-width: 900px) {
form{
  position: relative;
  width: 99%;
  font-family: 'Poppins', 'sans-serif';
  font-size: 20px;
}}

/* split the phone input and email input */
@media only screen and (min-width: 517px) {
form .collumn{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 4%;
}}
/* at small enough width, vertically
allign phone and email input */
@media only screen and (max-width: 516px) {
form .collumn{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 4%;
}}
/* all inputs */
form input{
  height: 30px;
  width: 100%;
  margin-bottom: 15px;
  font-family: 'Montserrat', sans-serif;
}
/* message input section */
form textarea{
  height: 100px;
  width: 100%;
  margin-bottom: 15px;
  font-family: 'Montserrat', sans-serif;
}
/* submit button */
#submit{
  color: #f7f5ee;
  width: 153px;
  height: 40px;
  background: black;
  font-size: 15px;
  cursor: pointer;
  margin-bottom: 25px;
}
form .submit{
  text-align: center;
}
/* div surrounding map, centers the map */
.map{
  text-align: center;
  width: 95%;
}
/* imbeded google map */
.map iframe{
  border-radius: 30px;
  border: 1px solid grey;
}
/* different maps hide and 
show depending on screen width */
@media only screen and (min-width: 539px) {
#map1{
  display: inline;
}
#map2{
  display: none;
}}

@media only screen and (max-width: 538px) {
#map1{
  display: none;
}
#map2{
  display: inline;
}}


/* FOOTER for all pages */
footer{
  padding-top: 60px;
  padding-bottom: 20px;
  font-family: 'Merriweather', 'san-serif';
  font-size: 12px;
  text-align: center;
}

/* assigned at times to certain elements as a class to 
show the elements, used mostly with javascript */
.show {display: block;}