@charset "UTF-8";
/* CSS Document */

body {
  margin: 0;
}

/*HEADER*/
header {
  display: flex;
  justify-content: space-between;
  padding: 4em;
  background-color: #fffdec;
}
header img {
  max-width: 20em;
}
.nav {
  justify-content: space-between;
  margin: 1em;
}
.nav a {
  color: black;
  font-family: helvetica;
  font-weight: lighter;
  font-size: 25px;
  text-decoration: none;
  padding: 0em 2em 0em 0em;
}
.nav a:hover {
  font-weight: bolder;
}


/*HERO*/
.hero {
  display: block;
  padding: .5em 0em 10em;
  background-color: #fffdec;
}  

.hero h2 {
  font-family: helvetica;
	font-weight: normal;
  font-size: 1.5em;
  padding-top: 2em;
  text-align: center;
  line-height:1.5em;
  color: black;
}

.hero h3 {
	font-family: helvetica, sans-serif;
  font-style: bold;
  font-size: 3em;
  text-align: center;
  margin: -.25em 0em;
	padding: 1em 0em 0em;
  color: black;
}

/*GALLERY*/
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: #b0c5c9;
  padding: 10em;
  align-items: center;
}
.gallery a {
  text-align: center;
}
.gallery img {
  max-width: 50%;
  border: .5em solid #191f3a;
}

/*BIO*/
.bio {
  background-color: #FFFDEC;
  margin: 0;
  padding: 10em;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.bio-words {
  padding: 0em 0em 0em 5em;
}
.bio-words h2 {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1.25em;
}
.bio-words h1 {
  font-family: "turbinado-pro", sans-serif;
	font-weight: 400;
	font-style: normal;
  font-size: 6em;
  margin: -.5em 0em 0em 1.15em;
}
.bio-words p {
  font-family: helvetica;
  line-height: 1.5em;
}
.bio img {
  max-width: 45%;
  margin-left: 10em;
  padding: 2em;
}
.bio a {
  font-family: helvetica;
  color: #fffdec;
  text-decoration: none;
  text-align: center;
  background-color: #616d32;
  padding: 2em;
  margin: 1em 10em 0em;
  border-radius: 1em;
}
.bio a:hover {
  font-weight: bolder;
}

/*ABOUT*/
.about-page {
  background-color: #fffdec;
  margin: 0em;
  padding: 2em 4em;
}
.about-page h1 {
  font-family: helvetica;
  font-size: 2.5em;
  padding-left: 1.5em;
}
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.columns img {
  max-width: 60%;
  place-content: center;
  padding: 0em 5em;
}
.columns p {
  font-family: helvetica;
  font-size: 1.25em;
  line-height: 1.5em;
  padding: 0em 3em;
}
.about-page a {
  font-family: helvetica;
  font-size: 1.5em;
  text-decoration: none;
  color: black;
  text-align: center;
  display: block;
  margin: 3em 18em;
  background-color: #616d32;
  padding: 1.7em;
  border-radius: 1em;
}
.about-page a:hover {
  background-color: #616d32;
  font-weight: bolder;
}

/*ZION WEBSITE*/
.zion-title {
  display: block;
  padding: 2em 4em;
  background-color: #fffdec;
}
.zion-title h1 {
  font-family: helvetica;
  font-weight: bold;
  font-size: 2em;
}
.zion-title h2 {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1.5em;
}
.zion-title p {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1em;
  line-height: 1.75em;
}
.zion-images {
  background-color: #fffdec;
  display: flex;
  align-items: center;
  padding: 2em;
}
.zion-images img {
  max-width: 40%;
  border-radius: 1em;
	margin-left: auto;
  margin-right: auto;
}
.zion-description {
  background-color: #fffdec;
  margin: 0em;
  padding: 2em 10em;
}
.zion-description p {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1.25em;
  line-height: 1.75em;
}
.zion-description a {
  display: block;
  text-align: center;
  font-family: helvetica;
  text-decoration: none;
  color: black;
  font-weight: bold;
  font-size: 1.5em;
  padding: 2em;
}
.zion-description a:hover {
  text-decoration: underline;
}

/*MUFFNSTUFF*/
.muffnstuff-title {
  display: block;
  padding: 2em 4em;
  background-color: #fffdec;
}
.muffnstuff-title h1 {
  font-family: helvetica;
  font-weight: bold;
  font-size: 2em;
}
.muffnstuff-title h2 {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1.5em;
}
.muffnstuff-title p {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1em;
  line-height: 1.75em;
}
.muffnstuff-images {
  background-color: #fffdec;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 2em;
	text-align: center;
}
.muffnstuff-images img {
 	max-width: 40%;
	border-radius: 1em;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
}
.muffnstuff-description {
  background-color: #fffdec;
  margin: 0em;
  padding: 2em 10em 10em;
}
.muffnstuff-description p {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1.25em;
  line-height: 1.75em;
}

/*CHILLAX*/
.chillax-title {
  display: block;
  padding: 2em 4em;
  background-color: #fffdec;
}
.chillax-title h1 {
  font-family: helvetica;
  font-weight: bold;
  font-size: 2em;
}
.chillax-title h2 {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1.5em;
}
.chillax-title p {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1em;
  line-height: 1.75em;
}
.chillax-images {
  background-color: #fffdec;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 2em;
	text-align: center;
}
.left {
  display: inline-block;
  margin-right: 2em;
}
.left img {
  padding: 2em;
  border-radius: 1em;
}
.chillax-images img {
  max-width: 40%;
  border-radius: 1em;
	margin-left: auto;
	margin-right: auto;
}
.chillax-description {
  background-color: #fffdec;
  margin: 0em;
  padding: 2em 10em 10em;
}
.chillax-description p {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1.25em;
  line-height: 1.75em;
}

/*SALVATION ARMY WEBSITE*/
.salvation-title {
  display: block;
  padding: 2em 4em;
  background-color: #fffdec;
}
.salvation-title h1 {
  font-family: helvetica;
  font-weight: bold;
  font-size: 2em;
}
.salvation-title h2 {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1.5em;
}
.salvation-title p {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1em;
  line-height: 1.75em;
}
.salvation-images {
  background-color: #fffdec;
  display: flex;
  align-items: center;
  padding: 2em;
	text-align: center;
}
.salvation-images img {
  max-width: 40%;
  border-radius: 1em;
	margin-left: auto;
	margin-right: auto;
}
.salvation-description {
  background-color: #fffdec;
  margin: 0em;
  padding: 2em 10em;
}
.salvation-description p {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1.25em;
  line-height: 1.75em;
}
.salvation-description a {
  display: block;
  text-align: center;
  font-family: helvetica;
  text-decoration: none;
  color: black;
  font-weight: bold;
  font-size: 1.5em;
  padding: 2em;
}
.salvation-description a:hover {
  text-decoration: underline;
}

/*GRACE NOTES*/
.grace-title {
  display: block;
  padding: 2em 4em;
  background-color: #fffdec;
}
.grace-title h1 {
  font-family: helvetica;
  font-weight: bold;
  font-size: 2em;
}
.grace-title h2 {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1.5em;
}
.grace-title p {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1em;
  line-height: 1.75em;
}
.grace-images {
  background-color: #fffdec;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 2em;
	text-align: center;
}
.grace-images img {
  max-width: 40%;
  border-radius: 1em;
	margin-left: auto;
	margin-right: auto;
}
.grace-description {
  background-color: #fffdec;
  margin: 0em;
  padding: 2em 10em 10em;
}
.grace-description p {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1.25em;
  line-height: 1.75em;
}

/*BMONTHLY*/
.bmonthly-title {
  display: block;
  padding: 2em 4em;
  background-color: #fffdec;
}
.bmonthly-title h1 {
  font-family: helvetica;
  font-weight: bold;
  font-size: 2em;
}
.bmonthly-title h2 {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1.5em;
}
.bmonthly-title p {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1em;
  line-height: 1.75em;
}
.bmonthly-images {
  background-color: #fffdec;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 2em;
  text-align: center;
}
.bmonthly-images img {
  max-width: 70%;
  border-radius: 1em;
	margin-left: auto;
  margin-right: auto;
}
.bmonthly-description {
  background-color: #fffdec;
  margin: 0em;
  padding: 2em 10em 10em;
}
.bmonthly-description p {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1.25em;
  line-height: 1.75em;
}

/*SUNDAE*/
.sundae-title {
  display: block;
  padding: 2em 4em;
  background-color: #fffdec;
}
.sundae-title h1 {
  font-family: helvetica;
  font-weight: bold;
  font-size: 2em;
}
.sundae-title h2 {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1.5em;
}
.sundae-title p {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1em;
  line-height: 1.75em;
}
.sundae-images {
  background-color: #fffdec;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 2em;
  text-align: center;
}
.sundae-images img {
  max-width: 70%;
  border-radius: 1em;
	margin-left: auto;
  margin-right: auto;
}
.sundae-description {
  background-color: #fffdec;
  margin: 0em;
  padding: 2em 10em 10em;
}
.sundae-description p {
  font-family: helvetica;
  font-weight: normal;
  font-size: 1.25em;
  line-height: 1.75em;
}

/*FOOTER*/
footer {
  background-color: #64474a;
}
.footer-main {
  margin: 0;
  padding: 4em 4em 0em;
  display: grid;
  grid-template-columns: 2fr 1fr;
}
.contact-info h3 {
  font-family: helvetica;
  font-size: 2.5em;
  color: #fffdec;
}
.email {
  display: flex;
  align-items: center;
  padding: 2.5em 0em;
}
.email img {
  max-width: 4em;
}
.email a {
  font-family: helvetica;
  margin-left: 1em;
  font-size: 1.5em;
  text-decoration: none;
    color: #e9dcce;

}
.email a:hover {
  text-decoration: underline;
}
.instagram {
  display: flex;
  align-items: center;
}
.instagram img {
  max-width: 4em;
}
.instagram a {
  font-family: helvetica;
  font-size: 1.5em;
  margin-left: 1em;
  text-decoration: none;
    color: #e9dcce;
}
.instagram a:hover {
  text-decoration: underline;
}
footer h6 {
  font-family: helvetica;
  font-size: 2em;
	margin: 1.5em 0em;
    color: #e9dcce;
}
.footer-right a img {
  max-width: 20em;
  padding-left: 10em;
  padding-top: 16.5em;
  padding-bottom: 5em;
}
.checkers {
	max-width: 100%;
  max-height: 100%;
}

/*1200PX SCREEN*/
@media screen and (max-width: 1200px) {
  .nav {
    margin: .5em;
  }
  .nav a {
    padding: 0em 1em;
  }
  .hero-words {
    margin-top: -3em;
  }
  .bio a {
    margin: 2em 5em;
    padding: 1;
  }
}

/* 1000PX SCREEN */
@media screen and (max-width: 1000px) {
  .nav a {
    font-size: 1.25em;
  }
  .gallery {
    padding: 6em;
  }
  .bio {
    padding: 5em;
  }
  .bio-photo img {
    max-width: 80%;
    padding: 2em;
    margin: 0em;
  }
  .bio-words {
    padding: 2em;
  }
  .bio-words h1 {
    margin: -.5em 0em 0em 1.15em;
  }
  .bio a {
    margin: -5em 5em 5em;
    padding: 1em;
  }
  footer h6 {
    font-size: 2.5em;
    margin-top: 2.25em;
  }
  .footer-right a img {
    max-width: 15em;
  }
}

/*900 PX TABLET*/
@media screen and (max-width: 900px) {
  .nav a {
    font-size: 1.5em;
    padding: .5em;
  }
  .hero-words h2 {
    font-size: 1.25em;
  }
  .hero-words h3 {
    font-size: 3.5em;
  }
  .gallery {
    display: inline-block;
    padding: 10em 15em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .gallery img {
    margin: 1em;
  }
  .bio a {
    margin-top: 1em;
  }
  .contact-info h3 {
    font-size: 2em;
  }
  .contact-info a {
    font-size: 1.25em;
  }
  footer h6 {
    margin: 2em 0em;
  }
  .footer-right a img {
    padding-left: 0em;
    padding-top: 19.5em;
  }
}

/* 800 PX TABLET */
@media screen and (max-width: 800px) {
  .nav a {
    font-size: 1em;
  }
  .nav {
    padding: 0em;
  }
  .gallery {
    padding: 10em;
  }
  .bio-words h2{
    font-size: 1em;
  }
  .bio-words h1 {
    font-size: 4.5em;
  }
  .bio-words p {
    font-size: .85em;
  }
  .bio a {
    margin-top: .5em;
    margin-left: auto;
    margin-right: auto;
  }
  footer h6 {
    display: none;
  }
  footer a img {
    padding-bottom: 3em;
  }
}

/*300 PX SCREEN */
@media screen and (max-width: 300px) {
  header {
    padding: 1.5em;
  }
  header img {
    max-width: 50%;
  }
  .nav {
    padding: 0em;
    margin: 0em;
  }
  .hero {
    padding: 2em;
  }
  .hero h2 {
    font-size: 1em;
  }
  .hero h3 {
    font-size: 2em;
  }
  .gallery {
    padding: 2em;
  }
  .bio {
    padding: 1em 1em 5em;
    display: block;
  }
  .bio img {
    padding-top: 0em;
  }
  .bio a {
    margin: 2em;
  }
  footer {
    padding: 1.5em;
    display: block;
  }
  .contact-info h3 {
    font-size: 1.5em;
  }
  .contact-info img {
    max-width: 15%;
  }
  .contact-info a {
    font-size: 1em;
    margin-left: .5em;
  }
  .footer-right a img {
    max-width: 75%;
    padding-left: 3em;
    padding-top: 2em;
    padding-bottom: 1em;
  }
}

/*MOBILE DEVICE*/
@media screen and (max-width: 670px) {
  header {
    padding: 2em;
  }
  header img {
    max-width: 50%;
  }
  .nav {
    padding: 0em;
    display: flex;
  }
  .nav a {
    font-size: 1.25em;
  }
  .hero {
    padding: 3em 3em 5em;
  }
  .hero-words h2 {
    font-size: 1em;
  }
  .hero-words h3 {
    font-size: 3em;
  }
  .gallery {
    padding: 3em;
  }
  .bio {
    display: block;
    padding-top: 2em;
  }
  .bio img {
    max-width: 50%;
    padding: 0em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: flex;
  }
  .bio a {
    margin: 5em 10em;
  }
}

/*WIDE PHONE SIZE*/
@media screen and (max-width: 560px) {
  header img {
    max-width: 80%;
  }
  .nav a {
    padding: .5em;
    font-size: 1.15em;
  }
  .hero-words h3 {
    font-size: 2em;
  }
  .gallery {
    padding: 3em;
    display: inline-block;
  }
  .gallery a img {
    text-align: center;
  }
  .bio-photo img {
    padding-bottom: 3em;
  }
  .bio a {
    margin-left: 7.25em;
    margin-right: auto;
    text-align: center;
  }
  footer {
    padding: 2em;
  }
  .contact-info img {
    max-width: 20%;
  }
  .contact-info a {
    font-size: 1.25em;
    margin: .5em;
  }
  .footer-right a img {
    padding: 18em 5em 0em 0em;
    margin: 0em;
  } 
}
@media screen and (max-width: 500px) {
  header img {
    max-width: 100%;
  }
  .nav {
    margin: 0em;
  }
  .nav a {
    font-size: 1em;
  }
  .bio {
    padding: 1.5em 1.5em 4em;
  }
  footer {
    padding: 2em;
  }
  .contact-info img {
    max-width: 20%;
  }
  .contact-info a {
    font-size: 1em;
  }
  .contact-info div {
    padding: .5em 0em;
  }
   .footer-right a img {
    max-width: 100%;
  }
}

@media screen and (max-width: 400px) {
  header img {
    max-width: 100%;
  }
  .nav a {
    font-size: 1em;
    padding: .25em;
  }
  .nav {
    margin: 0em;
  }
  .hero-words h2 {
    font-size: .8em;
  }
  .hero-words h3 {
    font-size: 1.75em;
  }
  .bio {
    padding: 1em 1em 3em;
  }
  .bio-words h2 {
    font-size: .85em;
  }
  .bio a {
    margin-left: 6.25em;
  }
  footer {
    padding: 1em 2em;
  }
  .contact-info img {
    max-width: 15%;
  }
  .contact-info a {
    font-size: 1em;
    padding: .25em;
    margin: .25em;
  }
  .footer-right a img {
    padding-left: 0em;
  }
}

@media screen and (max-width: 350px) {
  header img {
    max-width: 60%;
  }
  .nav {
    padding: 0em;
    margin: 0em;
  }
  .nav a {
    font-size: .5em;
  }
  .hero-words h2 {
    font-size: .8em;
  }
  .hero-words h3 {
    font-size: 1.5em;
  }
  .bio {
    padding: 1.5em 1.5em 4em;
  }
  .bio a {
    margin-left: 4em;
  }
  footer {
    padding: 1.5em;
  }
  .contact-info {
    display: block;
    padding: 0em;
    margin: 0em;
  }
  .contact-info a {
    font-size: 1em;
  }
  .email {
    padding: .5em 0em;
  }
  .instagram {
    padding: .5em 0em;
  }
  .footer-right a img {
    max-width: 100%;
  }
}