html{
  height:100vh;
  overflow: hidden;
  
}

*{
  box-sizing: border-box;
}

body{
  font-family: 'Trebuchet MS', sans-serif;
}

.header{
  width:100%;
  height:70px;
  background: rgba(34,34,34,.3);  
  position:fixed;
  top:0px;
  left:0px;
  z-index: 2;
  -webkit-transition: all ease-out .5s;
  -moz-transition: all ease-out .5s;
  -o-transition: all ease-out .5s;
  transition: all ease-out .5s;
}
.header.active{
  background: rgba(34,34,34,1);
}
    .logo img{
      position: absolute;
      top:10px;
      left:10px;
      height:45px;
    }
    .churchname{
      position: absolute;
      top:0px;
      left:50%;
      transform: translateX(-50%);
      text-align: center;
      font-size: 30px;
      color:white;
      text-shadow: 2px 2px 2px 5px rgba(0,0,0,0.3), 5px 5px 70px rgba(255,255,255,0.5);
      text-decoration: none;
      transform:scale(1.2,1) translateX(-41%);
    }
    .navbuttons{
      position:absolute;
      top:40px;
      left:50%;
      transform: translateX(-50%);
      color:white;
      text-shadow: 2px 2px 2px 5px rgba(0,0,0,0.3), 5px 5px 70px rgba(255,255,255,0.5);
    }
        .navbuttons a{
          display:inline-block;
          width:68px;
          text-align: center;
          font-size: 12px;
          text-decoration: none;
          box-sizing: border-box;
          /* border-right: 1px solid white; */
          /* color:white; */
          border-width:1px;
          color:#666666;
          border-color:#dcdcdc;
          border-radius:6px;
          box-shadow:inset 0px 1px 0px 0px #ffffff;
          text-shadow:inset 0px 1px 0px #ffffff;
          background:linear-gradient(#f9f9f9, #cacaca);
        }
        /* .navbuttons a:last-child{
          border-right:none;
        } */
        .navbuttons a:hover{
          background: linear-gradient(#cacaca, #f9f9f9);
        }
    .navmenuicon{
      position:absolute;
      top:15px;
      right:20px;
      width:40px;
      height:35px;
      background: rgba(0,0,0,100);
      border-radius: 10px;
      box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.3);
    }
        .navmenuicon:before{
          color:rgb(237, 232, 232);
          font-size: 37px;
          margin:2px;
        }
        .navmenuicon:hover{
          box-shadow: .5px .5px .5px 1.5px rgba(255,255,255,0.3);
        }
        .navmenuicon:active{
          top:16;
        }
    .navmenu{
      display:none;
      position:absolute;
      top:0px;
      right:0px;
      width:100%;
      height:100vh;
      background-color: rgba(0,0,0,0.5);
      color:white;
    }
          .navmenubody{
            display:none;
            position:absolute;
            top:0px;
            right:0px;
            width:300px;
            height:100vh;
            padding:10px;
            padding-top:70px;
            box-sizing: border-box;
            background: #222;
            -webkit-transition: display ease-in .5s;
            -moz-transition: display ease-in .5s;
            -o-transition: display ease-in .5s;
            transition: display ease-in .5s;
          }
          .navmenubody button{
            display:inline-block;
            width:48%;
            height:40px;
            text-align: center;
            font-size: 16px;
            color:white;
            border:none;
            background: transparent;
            cursor:pointer;
          }
          .navmenubody a{
            display:block;
            width:100%;
            height:22px;
            text-align: left;
            font-size: 18px;
            color:white;
            text-decoration: none;
            margin-bottom:5px;
          }
          .navmenubody a:hover{
            font-size: 18.5px;
          }
        
        

.sections{
  position: absolute;
  top:0px;
  left:0px;
  width:100vw;
  height:100vh;
  margin:0;
  background:#222;
  box-sizing: border-box;
  perspective: 2px;
  transform-style: preserve-3d;
  overflow-x:hidden;
  overflow-y:scroll;
}
.section{
  width:100%;
  min-height:100vh;
  position:relative;
  box-sizing: border-box;
  transform-style: preserve-3d;
}

.content{
  background:#e6e6e6;
}

@media only screen and (max-width:732px) {
  .navbuttons{
    display:none;
  }
  .subsection{
    flex-direction: column;
  }
  .services{
    display:flex;
    flex-direction:column;
  }
  .subsectionimg{
    order:1;
    max-width:300px;
    width:100%;
  }
  .subsectiontext{
    order:2;
    width:100%;
  }
}


.footer{
  position:relative;
  min-height:80px;
  color:white;
  font-size:12px;
}
    .footerleft{
      position:absolute;
      top:0px;
      left:0px;
      width:100%;
      text-align: left;
      vertical-align: top;
      padding:20px;
    }
    .footercenter{
      position:absolute;
      top:0px;
      left:0px;
      width:100%;
      text-align: center;
      vertical-align: top;
      padding:20px;
    }
    .footerright{
      position:absolute;
      top:0px;
      right:0px;
      width:100%;
      text-align: right;
      vertical-align: top;
      padding:20px;
    }