@import url('https://fonts.googleapis.com/css2?family=Birthstone&family=Roboto+Slab:wght@100..900&display=swap');
/*li{
color: #2e5783;
color: #305d98;
color: #b89253;
color: goldenrod;
}*/

*{
  font-family: "Roboto Slab", serif;
}

html {
  scroll-behavior: smooth;
}

li{
    color: #305d98;
}

li:hover{
    color: goldenrod;
    text-decoration: underline;
}

.borderBar{
    cursor: pointer;
  }
  
  .open .barOne {
      -webkit-transform: rotate(-45deg) translate(-6px, 8px);
      transform: rotate(-45deg) translate(-6px, 6px);
  
    }
    
    .open .barTwo {
      opacity: 0;
  
    }
    
    .open .barThree {
      -webkit-transform: rotate(45deg) translate(-6px, -6px);
      transform: rotate(45deg) translate(-6px, -6px);
    }

    .giveBtn{
      color: white;
      background-color:#cfa940;
      border-radius: 20px;
      padding: 12px 40px;
      
    }

    .giveBtn:hover{
      color: white;
      background-color: #305d98;
      text-decoration: none;
    }

    .mainHeading, .sectionHeading{
      font-family: "Birthstone", serif;  
    }

    .mainHeading{
      background-color: #305d98;
      text-shadow: 3px 3px 5px black;
    }

    .wordHeading{
      text-shadow: 3px 3px 5px black;
    }

    .johnsonImg{
      box-shadow: 5px 10px 18px black;
      
    }

    .icon{
      position: relative;
      
    }

    .hamburger{
      margin-left: 200px;
     
      width: 50px;
    }

    .believe{
      width: 80%;
      margin: 0 auto;
      
    }

    .about{
      position: relative; 
    }

    .transition {
    
      height: 100%;
      overflow: hidden;
    }

    .churchFamily{
      width: 100%;
      height: auto;
      
    }
    
      .service {
        position: relative;
       background-color: #cfa940;
       padding: 50px auto;
         
      }

      .offering{
        position: relative;
        background-color: #305d98;
        padding: 25px;
      }
      
    .map{
      width: 90%;
      margin: 10px auto;
    }

    .fa-facebook{
      color: #0064e0;
    }

 

    @media only screen and (max-width: 600px) {

      .word{
        width: 95%;
        height: 300px;
        margin: 10px auto;
      }
    }

    @media only screen and (min-width: 600px) {
      .word{
        width: 95%;
        height: 400px;
        margin: 10px auto;
      }
    }

    @media only screen and (min-width: 768px) {
      .word{
        width: 85%;
        height: 450px;
        margin: 10px auto;
      }
    }

    @media only screen and (min-width: 992px) {
      .word{
        width: 80%;
        height: 500px;
        margin: 10px auto;
      }
    }

    @media only screen and (min-width: 1024px) {
      .word{
        width: 1000px;
        height: 750px;
        margin: 10px auto;
      }

      .map{
        width: 70%;
        margin: 10px auto;
      }

     
    }
    
    @media only screen and (max-width:1024px){
        .nav-menu{
          height: 0px; 
        }
        
        .nav-menu.open{
          width: 100%;
          height: 90vh; 
          position: absolute;
          display: block;
          margin-top: 30px;
          left: 0;
          background-color: white;  
        }

        
  
      }