respon.css

@media (max-width: 1280px) {
	.bagian2 {
		height: 1700px;
	}

	.second-icon {
		width: 250px;
		padding-right: 33px;
	}

  	.anggota {
  		padding-bottom: 35px; 
  	}

  	.anggota p {
  		display: inline-block;
  		width: 100%;
  		padding-bottom: 10px
  	}

  	.nama {
  		width: 250px;
  	}
}

@media (max-width: 1024px) {
	header {
		height: 225px;
	}

	.header-image {
		max-height: 225px;
	}

	.nav {
		width: 100%;
	}

  	.sticky {
	 	position: fixed;
	  	top: 0;
  		width: 100%;
	}

  	.logo {
  		margin: 3px 75px 0 75px;
  		padding: 0 0 0 0;
  	}

  	.header-left a {
  		padding: 0 20px;
  	}

  	.login {
  		display: none;
  	}

  	.bagian1 {
  		height: 1835px;
  	}

  	.banner {
  		margin: 0 75px 0 75px;
  		padding: -10px 0 10px 0;
  	}

  	@keyframes banner {
  		from {top: 0;}
  		to {top: 60px;}
  	}

  	.isi {
  		margin: 130px 75px 100px 75px;
  	}

  	.judul {
  		margin-top: 50px;
  		margin-bottom: 30px
  	}

  	.perkenalan {
  		align-items: center;
  		justify-content: center;
  		flex-direction: column;
  	}

  	.perkenalan img {
  		width: 100%;
  	}

  	.perkenalan p {
  		width:100%;
  		line-height: 200%;
  		padding-bottom: 40px;
  		padding-right: inherit;
  	}

  	.catatan {
  		line-height: 35px;
  	}

  	.contents {
  		flex-wrap: wrap;
  		align-content: center;
  		justify-content: center;
  	}

  	.content {
  		padding: 35px 15px 0 15px;
  		width: 50%;
  	}

  	.content p {
  		font-size: 16px;
  		width: 80%;
  	}

  	.bagian2 {
  		margin: 0 75px 0 75px;
  		height: 1850px;
  	}

  	.ilustrasi {
  		flex-wrap: wrap;
  	}

  	.first-icon {
  		width: 100%;
  		margin-bottom: 0;
  	}

  	.first-icon h3 {
  		font-size: 18px;
  	}

  	.first-icon p {
  		font-size: 16px;
  	}

  	.galeri h2 {
  		padding: 75px 75px 50px 75px;
  	}

  	.second-icon {
  		width: 250px;
  		align-items: center;
  		justify-content: center;
  	}

  	.second-icon:hover {
  		-ms-transform: none;
    	-webkit-transform: none;
    	transform: none;
  	}

  	.profile {
  		margin: 0 75px 75px 75px;
  		height: auto;
  	}

  	.anggota {
  		padding: 25px;
  	}

  	.anggota p {
  		display: inline-block;
  		width: 100%;
  		padding-bottom: 10px
  	}

  	.nama {
  		width: 250px;
  	}

  	footer {
  		height: 100px;
  		padding: 20px 30px;
  		display: flex;
  		flex-direction: column;
  		align-items: center;
  		justify-content: center;
  	}
}

@media (max-width: 834px) {
	.content-3 {
  		border-style: none;
  	}

  	.bagian1 {
  		height: 2000px;
  	}

  	.bagian2 {
  		height: 2450px;
  	}

  	.profile {

  	}

  	.second-icon {
  		width: 250px;
  		padding-right: 5px;
  		align-items: center;
  		justify-content: center;
  	}
}

@media (max-width: 768px) {
	header {
		height: 175px;
	}

	.header-image {
		max-height: 175px;
	}

	.nav {
		width: 100%;
	}

  	.sticky {
	 	position: fixed;
	  	top: 0;
  		width: 100%;
	}

  	.logo {
  		margin: 2px 50px 0 50px;
  		padding: 0 0 0 0;
  	}

  	.login {
  		display: none;
  	}

  	.bagian1 {
  		height: 1915px;
  	}

  	.banner {
  		margin: 0 50px 0 50px;
  		padding: -10px 0 10px 0;
  	}

  	@keyframes banner {
  		from {top: 0;}
  		to {top: 60px;}
  	}

  	.isi {
  		margin: 130px 50px 100px 50px;
  	}

  	.judul {
  		margin-top: 50px;
  		margin-bottom: 30px
  	}

  	.judul h2 {
  		font-size: 40px;
  	}

  	.perkenalan {
  		align-items: center;
  		justify-content: center;
  		flex-direction: column;
  	}

  	.perkenalan img {
  		width: 100%;
  	}

  	.perkenalan p {
  		width:100%;
  		font-size: 18px;
  		padding-bottom: 40px;
  		padding-right: inherit;
  	}

  	.catatan {
  		line-height: 35px;
  	}

  	.contents {
  		flex-wrap: wrap;
  	}

  	.content {
  		width: 100%;
  	}

  	.content-3 {
  		border-style: none;
  	}

  	.content p {
  		font-size: 16px;
  		width: 80%;
  	}

  	.bagian2 {
  		margin: 0 50px 0 50px;
  		height: 2475px;
  	}

  	.ilustrasi {
  		flex-wrap: wrap;
  	}

  	.first-icon {
  		width: 100%;
  		margin-bottom: 0;
  	}

  	.first-icon h3 {
  		font-size: 18px;
  	}

  	.first-icon p {
  		font-size: 16px;
  	}

  	.galeri h2 {
  		padding: 75px 75px 50px 75px;
  	}

  	.second-icon {
  		width: 250px;
  	}

  	.second-icon:hover {
  		-ms-transform: none;
    	-webkit-transform: none;
    	transform: none;
  	}

  	.profile {
  		margin: 0 50px 75px 50px;
  		height: auto;
  	}

  	.anggota {
  		padding: 20px;
  	}

  	.anggota p {
  		display: inline-block;
  		width: 75%;
  		padding-bottom: 10px
  	}

  	.nama {
  		width: 250px;
  	}

  	footer {
  		height: 100px;
  		padding: 20px 30px;
  		display: flex;
  		flex-direction: column;
  		align-items: center;
  		justify-content: center;
  	}
}

@media (max-width: 480px) {
	header {
		height: 90px;
	}

	.header-image {
		max-height: 90px;
	}

	.nav {
		height: 45px;
		width: 100%;
	}

	.header-left li {
		display:none;
	}

  	.login {
  		display: none;
  	}

	.nav span {
		display:block;
  	}

  	.sticky {
	 	position: fixed;
	  	top: 0;
  		width: 100%;
	}

  	.logo {
  		font-size: 35px;
  		margin: 2px 30px 0 30px;
  		padding: 0 0 0 0;
  	}

  	.bagian1 {
  		height: 2025px;
  	}

  	.banner {
  		margin: 0 30px 0 30px;
  		padding: -10px 0 10px 0;
  	}

  	@keyframes banner {
  		from {top: 0;}
  		to {top: 60px;}
  	}

  	.banner h1{
  		letter-spacing: 7px;
  		font-size: 30px;
  		text-align: center;
  		width: 100%
  	}

  	.h19 {
  		display: flex;
  		flex-wrap: wrap;
  		align-items: center;
  		justify-content: center;
  		width: 100%;
  	}

  	.isi {
  		margin: 130px 30px 100px 30px;
  	}

  	.judul {
  		margin-top: 50px;
  		margin-bottom: 30px
  	}

  	.judul h2 {
  		font-size: 25px;
  	}

  	.h20 {
  		border-left: 3px solid #ff7e67;
    	border-top: 3px solid #ff7e67;
  	}

  	.perkenalan {
  		flex-direction: column;
  	}

  	.perkenalan img {
  		width: 100%;
  	}

  	.perkenalan p {
  		width:100%;
  		font-size: 16px;
  		padding-bottom: 40px;
  		padding-right: inherit;
  	}

  	.catatan {
  		line-height: 25px;
  	}

  	.contents {
  		flex-direction: column;
  	}

  	.content {
  		width: 100%;
  	}

  	.content-2 {
  		border-style: none;
  	}

  	.content-3 {
  		border-style: none;
  	}

  	.content p {
  		font-size: 14px;
  		width: 90%;
  	}

  	.bagian2 {
  		margin: 0 30px 0 30px;
  		height: 4850px;
  	}

  	.ilustrasi {
  		flex-direction: column;
  	}

  	.first-icon {
  		width: 100%;
  		margin-bottom: 0;
  	}

  	.icon-1 {
  		border-style: none;
  	}

  	.icon-2 {
  		border-style: none;
  	}

  	.first-icon h3 {
  		font-size: 16px;
  	}

  	.first-icon p {
  		font-size: 14px;
  	}

  	.galeri h2 {
  		padding: 75px 0 50px 0;
  		font-size: 25px;
  	}

  	.ig-pict {
  		flex-direction: column;
  	}

  	.second-icon {
  		width: 100%;
  		align-items: center;
  		justify-content: center;
  	}

  	.text {
  		font-size: 16px;
  	}

  	.second-icon:hover {
  		-ms-transform: none;
    	-webkit-transform: none;
    	transform: none;
  	}

  	.profile {
  		margin: 0 30px 75px 30px;
  		height: auto;
  	}

  	.anggota p {
  		padding-bottom: 10px
  	}

  	footer {
  		height: 100px;
  		padding: 20px 30px;
  		display: flex;
  		flex-direction: column;
  		align-items: center;
  		justify-content: center;
  	}
}