html, body {
	height: auto;
}

.img-fluider {
	max-height: 70vh;
	overflow-y: hidden;
}
.img-fluid-100 {
	width: 100%;
	height: auto;
}

.font-mid {
	font-size: 20px;
}

.post {
	line-height: 1.8;
}

.intro {
	background-color: #eeeeee;
    padding: 25px 20px;
    border-left: 5px solid #333;
    margin-bottom: 30px;
}
.img-mid {
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
}
.video-box {
	width: 100%;
	padding-top: 60%;
	position: relative;
}
.video-box > iframe {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

/* read more */
.readmore > .row {
	display: flex;
	justify-content: space-between;
}
.readmore > .row + .row {
	margin-top: 40px;
}
.readmore .card {
	width: 29%;
	max-width: 18rem;
}
.readmore .card .card-title {
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
}
.readmore .card .card-text {
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
}
@media (max-width: 992px) {
	h1 {
		font-size: 2rem;
	}
}
@media (max-width: 768px) {
	h1 {
		font-size: 1.8rem;
	}
	.font-mid {
		font-size: 18px;
	}
	.readmore {
		display: block;
	}
	.readmore .card {
		width: 100%;
		margin: 0 auto 40px;
	}
}
@media (max-width: 576px) {
	.img-fluider {
		height: 300px;
		overflow: hidden;
	}
	.img-fluider .img-fluid-100 {
		height: 100%;
		width: auto;
	}
	
	h1 {
		font-size: 1.6rem;
	}
	.font-mid {
		font-size: 18px;
	}

}