@charset "utf-8";
/* CSS Document */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}
body{
	margin: auto;
	padding: 0;
	font-family:Arial, Helvetica, sans-serif;
	min-width: 1050px;
}

#header01{
	background-color: #ea4a03;
	background-image:url(pictures/background_001.jpg);
	background-position:top;
	background-repeat:no-repeat;
	background-size:cover;
	
}
nav{
	height: 120px;
	width: 900px;
}
main{
	display: grid;
	grid-template-columns: repeat(auto-fit, 550px);
	justify-content: center;
}
.visit1{
	max-width: 100%;
	justify-content: center;
}
.visit3{
	max-width: 100%;
	justify-content: center;
}
vision{
	display: grid;
	grid-template-columns: repeat(auto-fit, 600px);
	justify-content: center;


}
.vision{
	width: 100%;
	justify-content: center;
}
.mission{
	width: 100%;
	justify-content: center;
}


.nav-links {
  display: flex;
  list-style: none;
  width: 50%;
  height: 100%;
  justify-content: space-around;
  align-items: center;
  margin-right: -120px;
  
}

.nav-links li a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  margin-right:auto;
}
.gotopbtn{
	display: none;
	position: fixed;
	width: 50px;
	height: 50px;
	background:url(pictures/up_bg.png);
	bottom: 40px;
	right:50px;
	
	text-decoration: none;
	text-align: center;
	line-height: 50px;
	color:#e4e4e4;
	font-size: 22px;
	cursor: pointer;
	outline: none;
	transition-duration: 0.2s;
	transition-timing-function:ease-in-out;
	
}
.persembahan{
	background-color: #121212;
	word-spacing: -2px;
}
#contact{
	background-color: #ffffff;
}
.servicewa{
	width: 950px;
}
#services{
	width: 100%;
	background-color: #e4e4e4;
}
@media screen and (max-width: 1050px) {
  .line {
    width: 50px;
    height: 5px;
    background: white;
    margin: 5px;
  }
  nav {
    position: relative;
  }

  .hamburger {
    position: absolute;
    cursor: pointer;
    right: 15%;
    top: 50%;
    transform: translate(150%, -85%);
    z-index: 2;
  }

  .nav-links {
    position: relative;
    background: #ea4a03;
    height:600px;
    width: 1020px;
	margin-top: -50%;
	margin-left: -15%;
    flex-direction: column;
    clip-path: circle(50px at -50% 30%);
    -webkit-clip-path: circle(50px at 50% -50%);
    transition: all 1s ease-out;
    pointer-events: none;
  }
  .nav-links.open {
    clip-path: circle(3000px at 50% -30%);
    -webkit-clip-path: circle(3000px at 50% -30%);
    pointer-events: all;
  }
  .nav-links li {
    opacity: 0;
  }
  .nav-links li a {
    font-size: 25px;
  }
  .nav-links li:nth-child(1) {
    transition: all 0.5s ease 0.2s;
  }
  .nav-links li:nth-child(2) {
    transition: all 0.5s ease 0.4s;
  }
  .nav-links li:nth-child(3) {
    transition: all 0.5s ease 0.6s;
  }
  .nav-links li:nth-child(4) {
    transition: all 0.5s ease 0.8s;
  }
  li.fade {
    opacity: 1;
  }
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}

#intro{
	height: 450px;
}

#about{
	background-color: #e4e4e4;
	word-spacing: -2px;
	margin-bottom: -15px;
}

#social{
	background-color: #242120;
}

#footer{
	background-color: #e4e4e4;
	margin-bottom: -12px;
	padding:0;
}

#about-pastors{
	background-color: #e4e4e4;
	margin-bottom: -15px;
}


#about-believes{
	background-color: #242120;
	width: 100%;

}

#about-visimisi{
	background-color: #e4e4e4;
}
#about-about{
	word-spacing: -2px;
	height: 100%;
}

#about-about-2{
	max-width: 55%;
	height: 100%;
}
#beliefs{
	width: 700px;
}