@media screen and (max-width: 575px) {
	body{
		padding-top: 100px;
	}

	.size{
		height: 50px;
		width: 40px;
	}

}

@media screen and (max-width: 700px) {
	h3{
		font-size: small;
	}
	
	.a{
		right: 100%;
	}
	
	.b{
		left: -50%;
		margin-top: 150%;
		z-index: 1;
	}
	
	.c{
		margin-left: -140%;
		top: 100%;
	}
	
	.d{
		left: -50%;
		margin-top: 150%;
	}
	
	.e{
		margin-left: -140%;
		top: 100%;
	}
	
	.f{
		left: -50%;
	}

}

div.parent {
	text-align: left;
	}

ul { 
	display: inline-block; 
	text-align: left; 
	}


body {
	margin: 0;
	color: black;
	text-align: center;
	font-family: "Lato", sans-serif;
	/* font-family: "Montserrat"; */
}

h1, h2, h3, h4{
	font-family: "Montserrat", sans-serif;  
	font-weight: 700;
	color: black;
}

h2 {
	font-size: 2.5rem;
}

h5{
	margin-bottom: 0;
}

h4{
	background-color: #ef8172bb;
  }
  
p{
	color: black;
	font-size: small;
}

li{
	color: black;
}

span{
	font-size:x-small;
}

.desc{
	margin: 10px 0;
}
.first{
	background-color: rgba(255, 248, 220, 0.596);
}

.center{
	background-color: rgba(247, 236, 193, 0.603);
}
/* .kelurahan{
	background-color: rgba(169, 169, 169, 0);
} */

.social-media li{
	display: inline;
}

.social-media{
	padding-left: 0;
}

.skill-row{
    margin: 30px 20px;
    text-align: left;
}

.side-post{
    text-align: left;
}

.code-img{
    width: 30%;
    float: left;
    margin-right: 20px;
	height: 150px;
}

.side-img{
    width: 30%;
    float: left;
	margin-right: 5px;
	height: 150px;
}

.parallax {
  /* Set a specific height */
  min-height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.transparant{
	width: 90%;
	background-color: rgba(255, 255, 255, 0.548);
	padding: 0;
}

.header{
	height: 50px;
	background-color: rgba(163, 240, 21, 0.911);
}

.header .header-logo {
    float: left;
    display: inline;
    margin-left: 12px;
}

/* .header img{
	padding-left: 30px;	
}

.header h2{
	padding-left: 30px;
} */

.container-fluid {
	background-color: #f5f5f598;
	width: 70%;
	border-radius: 100%;
	
}

li:hover{
	background-color: darkgray;
}

#title {
    
	padding: 1% 0 2%;
    color: aliceblue;
}

#prabumulih:hover {
	transform: ease-out;
	transform: scale(1.3,1.3);
}

.btn{
	cursor: pointer;
	display: none;
}

#tombol{
	cursor: pointer;
}

img{
	cursor: pointer;
	height: 120px;
	width: 110px;
}

input{
	display: none;
}

#peta {
	
	color:#EEEEEE;
}

.menu-open {
	transform: translate(50%,200%);
	position:absolute;
	display: block;
	width: 50%;
	/* cursor: pointer;
	z-index: 1; */
}

.a{
	left: 100%;
	top: 10%;
  }

.b{
	right: 100%;
	top: -25%;
}

.c{
	left: 100%;
	bottom: -25%;
}

.d{
	right: 100%;
	top: -25%;
}

.e{
	left: 100%;
	bottom: -25%;
}

.f{
	bottom: 100%;
	right: -30%;
}
	
/*#peta:hover {
	transform: ease-out;
	transform: scale(1.3,1.3);
}*/

.petabesak{
	transform: scale(1.5,1.5);
}

.peta{
	transform: scale(1.0,1.0);
}
@keyframes barat{
	0%{
		transform: scale(0.5,0.5) translate(50%,120%) ;
		opacity: 0;
	}

	100%{
		transform: scale(1.3,.1.3) translate(0,0);
		opacity: 1;
	}
}

.barat{

	animation: 0.8s ease-out 0s 1 barat;
	animation-fill-mode: forwards;
}

.panjang{
	overflow-y: 	auto;	
	height: 250px;
}
@keyframes baratbalik{
	0%{
		transform: scale(1.3,.1.3) translate(0,0);
		opacity: 1;
	}

	100%{
		
		transform: scale(0.5,0.5) translate(50%,120%) ;
		opacity: 0;
	}
}

.baratbalik{

	animation: 0.8s ease-out 0s 1 baratbalik;
	animation-fill-mode: forwards;
}






@keyframes selatan{
	0%{
		transform: scale(0.5,0.5) translate(0%,-120%);
		opacity: 0;
	}

	100%{
		transform:  scale(1.0,1.0) translate(0,0);
		opacity: 1;
	}
}

.selatan{
	animation: 0.8s ease-out 0s 1 selatan;
	animation-fill-mode: forwards;
}

@keyframes selatanbalik{
	0%{
		
		transform:  scale(1.0,1.0) translate(0,0);
		opacity: 1;
	}

	100%{
		transform: scale(0.5,0.5) translate(0%,-120%);
		opacity: 0;
		
	}
}

.selatanbalik{
	animation: 0.8s ease-out 0s 1 selatanbalik;
	animation-fill-mode: forwards;
}



@keyframes timur{
	0%{
		transform: scale(0.5,0.5) translate(-40%,-120%);
		opacity: 0;
	}

	100%{
		transform: scale(1.0,1.0) translate(0,0);
		opacity: 1;
	}
}

.timur{
	animation : 0.8s ease-out 0s 1 timur;
	animation-fill-mode: forwards;
}
@keyframes timurbalik{
	0%{
		
		transform: scale(1.0,1.0) translate(0,0);
		opacity: 1;
	}

	100%{
		transform: scale(0.5,0.5) translate(-40%,-120%);
		opacity: 0;
	}
}

.timurbalik{
	animation : 0.8s ease-out 0s 1 timurbalik;
	animation-fill-mode: forwards;
}




@keyframes utara{
	0%{
		transform: scale(0.5,0.5) translate(0%,150%);
		opacity: 0;
	}

	100%{
		transform: scale(1.0,1.0) translate(0,0);
		opacity: 1;
	}
}

.utara{
	animation : 0.8s ease-out 0s 1 utara;
	animation-fill-mode: forwards;
}

@keyframes utaratengah{
	0%{
		transform: translate(0%,0%);
	}
	100%{
		transform: translate(0%,80%);
	}
}



.utaratengah{
	animation: 0.8s ease-out 0s 1 utaratengah;
	animation-fill-mode: forwards;
}

@keyframes utaratengahbalik{
	0%{
		transform: translate(0%,80%);
	}
	100%{
		
		transform: translate(0%,0%);
	}
}

.utaratengahbalik{
	animation: 0.8s ease-out 0s 1 utaratengahbalik;
}

@keyframes utarabalik{
	0%{
		
		transform: scale(1.0,1.0) translate(0,0);
		opacity: 1;
	}

	100%{
		transform: scale(0.5,0.5) translate(0%,150%);
		opacity: 0;
	}
}

.utarabalik{
	animation : 0.8s ease-out 0s 1 utarabalik;
	animation-fill-mode: forwards;
}



.col-sm{
	width: 10%;
}

.kecil{
	height: 125px;
	width: 100px;
	}

@keyframes cambai{
	0%{
		transform: scale(0.5,0.5) translate(-40%,120%);
		opacity: 0;
	}

	100%{
		transform: scale(1.0,1.0) translate(0,0);
		opacity: 1;
	}
}

.cambai{
	animation : 0.8s ease-out 0s 1 cambai;
	animation-fill-mode: forwards;
}
@keyframes cambaibalik{
	0%{
		
		transform: scale(1.0,1.0) translate(0,0);
		opacity: 1;
	}

	100%{
		transform: scale(0.5,0.5) translate(-40%,120%);
		opacity: 0;
	}
}

.cambaibalik{
	animation : 0.8s ease-out 0s 1 cambaibalik;
	animation-fill-mode: forwards;
}




@keyframes erkate{
	0%{
		transform: scale(0.5,0.5) translate(50%,-100%);
		opacity: 0;
	}

	100%{
		transform: scale(1.0,1.0) translate(0,0);
		opacity: 1;
	}
}

.erkate{
	animation: 0.8s ease-out 0s 1 erkate;
	animation-fill-mode: forwards;
}

@keyframes erkatebalik{
	0%{
		transform: scale(1.0,1.0) translate(0,0);
		opacity: 1;
	}

	100%{
		transform: scale(0.5,0.5) translate(50%,-100%);
		opacity: 0;
	}
}

.erkatebalik{
	animation: 0.8s ease-out 0s 1 erkatebalik;
	animation-fill-mode: forwards;
}



#kelutara{
	width: 0;
	height: 0;
	visibility:hidden;
}


@keyframes kelutara{
	0%{
		width: 20%;
		height: 20%;
		opacity: 0;
		visibility: visible;
		background-color: black;
		color: black;
	}
	100%{
		width: 20%;
		height: 20%;
		transform: translate(20%,0%);
		visibility: visible;
		background-color: black;
		color: black;
	}
}

.kelutara{
	animation: 0.8s ease-out 0s 1 kelutara;
	animation-fill-mode: forwards;
}

@keyframes kelutarabalik{
	0%{
		width: 0%;
		height: 0%;
		opacity: 1;
		visibility: hidden;
		background-color: black;
		color: black;
	}
	100%{
		opacity: 0;
		width: 0%;
		height: 0%;
		transform: translate(20%,0%);
		visibility: hidden;
	}
}

.kelutarabalik{
	animation: 0.8s ease-out 0s 1 kelutarabalik;
	animation-fill-mode: forwards;
}

.bagianu{
	height: 600px;
	background-color: pink;
	
}