/* Hard Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* CONTAINER*/
.contain {
    width:85%;
    margin:0 auto;
    /* background-color:lightgray; */
}
/*ANCHOR*/
a {
    text-decoration:none;
    color:black;
}




/*** HEADER ***/
header {
    position: absolute;
    width:100vw;
    padding:.7em 0;
    background-color:white;
    font-family: 'PT Serif', serif;
    font-weight: 100;
    letter-spacing: 1px;
}
.flex-header {
    display:flex;
    justify-content: space-between;
}

/*NAVIGATION*/
.home-link span {
  color:black;

}
nav {
    cursor: pointer;
}
nav * {
    display: inline-block;
}
nav li {
    padding: 0 2em;
    color:black;
}
/*** HERO ***/
#hero {
    width:100vw;
    background: linear-gradient(to top,rgba(245,245,245,1) 60%, rgba(245,245,245,.3));
}
#hero-image {
    text-align:center;
    width:10vw;
    height:100%;
    bottom:10em;
    z-index: -1;
}
.content-top {
    padding:6em 0 4em 0;
    text-align: center;
    background-color:rgba(255,255,255,0);
    overflow: hidden; /*To keep the push to the right of '.content-top h2' from creating unwanted white space*/
}
.content-top h1 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 3em;
    letter-spacing: 3px;
    background-color:rgba(255, 255, 255, 0.8);
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.5);
}
.content-top h2 {
    padding-top:.5em;
    font-family: 'Red Hat Text', sans-serif;
    font-weight: 400;
    font-size: 1.7em;
    position:relative;
    left:6em;
    color:rgba(36, 36, 36, 1);
}
#content-bottom {
    padding:3em 0;
    text-align: center;
}
#content-bottom h2 {
    font-family: 'Red Hat Text', sans-serif;
    font-weight: 400;
    padding-bottom:2em;
    font-size:1.7em;
}
.time-slots {
    padding:.5em 0;
    font-size:1.5em;
    font-family: 'Red Hat Text', sans-serif;
    font-weight:500;
}
.time-slots span {
    font-weight:100;
}
.verse {
    padding:4em 0;
    font-family: 'Cinzel', serif;
    font-size:.8em;
}
/*LOCATION*/
#location {
    text-align: center;
    width:100vw;
    padding:2em 0 6em 0;
    background:linear-gradient(to left,#8e939e,#949193);
    font-family: 'PT Serif', serif;
    color:#f5f5f5;
}
.location-text {
  padding:2em 0 2em 0;
  font-size:1.3em;
}
#location p {
    width:60%;
    margin:0 auto;
    padding:1em 0 0 0;
    font-size:1.1em;
}
.mapouter {
    position:relative;text-align:right;
    height:500px;
    width:80%;
    overflow: hidden;
    margin:0 auto;

}
.gmap_canvas {
    overflow:hidden;background:none!important;height:500px;
}
iframe {
    width:100%;
    height:100%;
    border: none;
}

/*CONTACT*/
#contact {
    font-family: 'PT Serif', serif;
    background-color: #f5f5f5;
}
.flex {
    display:flex;
}
.contact-left {
    padding:4em 0;
    flex-basis: 50%;
}
.contact-left h2,p {
    text-align: center;
    padding-bottom:1em;
    font-weight:100;
}
.contact-left address div {
    padding:.5em;
}
.contact-left address div span {
    position:relative;
    left:1em;
    text-decoration: underline;
    cursor: pointer;
}
.contact-right {
    flex-basis: 50%;
    display:flex;
    align-items: center;
    justify-content: center
}
.contact-right img {
    width:60%;
}

/***  MEDIA QUERIES**/

@media (max-device-width: 400px) {
    
    header {
        display:block;
    }
    .flex-header {
        display:flex;
        justify-content: space-evenly;
    }
    nav {
        display:none;
    }
    .content-top h1 {
        font-size:1.6em;
    }
    .content-top h2 {
        position:relative;
        left:0;
        font-size:1.1em;
    }
    #content-bottom h2 {
        font-size: 1.4em;
    }
    .time-slots {
        font-size:1.1em;
    }
    .time-slots span {
        display: block;
        padding:.5em 0;
    }
    .location-text {
        padding:2em 0 2em 0;
        font-size:1em;
      }
    .location-text p {
        width:80% !important; 
        margin:0 auto;
        padding:1em 0 0 0;
        font-size:1em !important;
      }
      .flex {
          flex-wrap: wrap;
      }
      .contact-left {
          margin:0 auto;
          text-align:center;
      }
      .contact-right img {
          width:100%;
      }
      .contact-right {
          flex-basis: 100%;
      }
      .contact-left address div span {
          display:block;
          left:0;
      }
}