/* 
body{
	background-image: url(img/hero.jpeg);
	background-repeat: repeat-y;
	background-size: contain;
} */

.pro-pic{
	/* background-color: blue; */
	overflow: hidden;
	padding: 0;
	height: 70vh;
	display: flex;
	align-items: center;
	margin-top: 30px;
}

/* .container{
	border: 1px solid red;
} */


.judul{
	padding: 80px 50px;
	/* background-color: #ad7d52; */
}

.judul p:first-child{
	font: bolder 80px arial;
}

.judul p:nth-child(2){
	font: bold 40px arial;
}

.judul p:nth-child(3){
	font: normal 20px arial;
}

.judul p:nth-child(4){
	font: italic 15px arial;
}

.judul ul{
	padding: 0;
}

.judul li{
	display: inline-block;
	margin-right: 30px;
}

.sosmed ul{
	padding: 0;
}

.sosmed li{
	display: inline-block;
	margin-right: 30px;
}

/* cards */


/* .x-cards{
	width: 100%;
	display: flex;
	justify-content: center;
	max-width: 820px;
} */

.x-card--1 .x-card__img,
.x-card--1 .x-card__img--hover{
	background-image: url(img/D1.jpg);
}

.x-card--2 .x-card__img,
.x-card--2 .x-card__img--hover{
	background-image: url(img/D2.png);
}

.x-card--3 .x-card__img,
.x-card--3 .x-card__img--hover{
	background-image: url(img/D3.png); 
} 

.x-card--4 .x-card__img,
.x-card--4 .x-card__img--hover{
	background-image: url(img/D4.png); 
} 

.x-card--5 .x-card__img,
.x-card--5 .x-card__img--hover{
	background-image: url(img/D5.png); 
} 
.x-card--6 .x-card__img,
.x-card--6 .x-card__img--hover{
	background-image: url(img/D6.jpg); 
} 
.x-card--7 .x-card__img,
.x-card--7 .x-card__img--hover{
	background-image: url(img/D7.png); 
} 
.x-card--8 .x-card__img,
.x-card--8 .x-card__img--hover{
	background-image: url(img/D8.png); 
} 


.x-card__img{
	visibility: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 235px;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

.x-card__info-hover{
	position: absolute;
	padding: 16px;
	width: 100%;
	opacity: 0;
	top: 0;
}

.x-card__img--hover{
	transition: 0.2s all ease-out;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	position: absolute;
	height: 235px;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;	
	top: 0;
}

.x-card{
	margin-right: 25px;
	transition: all 0.4s cubic-bezier(0.175,0.885, 0,1);
	background-color: #fff;
	width: 250px;
	position: relative;;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0px 13px 10px -7px rgba(0,0,0,0.1);
	padding: 0;
}

.x-card:hover{
	box-shadow: 0px 30px 18px -8px rgba(0,0,0,0.1);
	transform: scale(1.1,1.1);
}


.x-card__info{
	z-index: 2;
	background-color: #ffffff;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	padding: 16px 24px 24px 24px;
}

.x-card__category{
	font-family: "Raleway", sans-serif;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 2px;
	font-weight: 500;
	color: #868686;
}

.x-card__title{
		margin-top: 5px;
		margin-bottom: 10px;
		font-family: "Roboto", serif;
}

.x-card__author{
	font-weight: 600;
	text-decoration: none;
	color: #ad7d52;
}

.x-card:hover .x-card__img--hover{
	height: 100%;
	opacity: 1;
	filter: blur(3px);
}

.x-card:hover .x-card__info{
	background-color: transparent;
	position: relative;
}

.x-card:hover .x-card__info.blackmode{
	background-color: transparent;
	position: relative;
	color: rgb(230, 230, 230);
}

.x-card:hover .x-card__info-hover{
	opacity: 1;
}


/* Footer Section */
footer{
	height: 10vh;
	background-color: #212529;
	color: #C8CFD4; 
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 10px;
}

.short-desc{
	padding: 2%;
}

/* Media Queries */

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



	.pro-pic{
		/* background-color: blue; */
		overflow: hidden;
		padding: 0;
		height: 200px;
		width: 200px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		margin-top: 0px auto;
	}
	
	
	.judul{
		padding: 10px;
		/* background-color: #ad7d52; */
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	
	.judul p:first-child{
		font: bolder 40px arial;
	}
	
	.judul p:nth-child(2){
		font: bold 20px arial;
		line-height: 10px;
	}
	
	.judul p:nth-child(3){
		font: normal 15px arial;
		line-height: 10px;
	}
	
	.judul p:nth-child(4){
		font: italic 10px arial;
	}
	
	.judul ul{
		padding-left: 30px;
		display: flex;
		justify-content: center;
	}
	
	.judul li{
		display: inline-block;
		width: 30px;
	}

	.short-desc{
		padding-bottom: 5%;
	}

	footer{
		font-size: smaller;
	}

  }

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

	.line2{
		display: none;
	}


}