.container-fluid,
.row {
	height: 100%;
}
.vertical-navbar {
	display: block;
	background: transparent;
}
.fixer {
	z-index: 100;
	display: block;
	width: 100%;
	position: fixed;
	top: 7rem;
	left: 4em;
}
.vertical-navbar .navbar-nav {
	display: block;
	width: 100%;
	text-align: center;
}
.vertical-navbar .navbar-nav .nav-link {
	color: #fff;
}
.vertical-navbar .navbar-nav .nav-link:hover {
	color: #f5b133;
}
.navbar-light .navbar-nav .nav-link.active {
	color: #f5b133;
}
.blog-header {
	margin-top: 6rem;
	padding-bottom: 1.25rem;
	margin-bottom: 2rem;
	margin-left: 200px;
}
.blog-title,
.blog-description {
	color: #f5b133;
}
.blog-description {
	border-bottom: .05rem solid #f5b133;
}

@media (min-width: 576px) {
	.vertical-navbar {
		border-right: 1px solid #f5b133;
	}
}
.blog-header .card {
	border: none;
	border-radius: 0px;
}
.card-columns {
	@include media-breakpoint-only(lg) {
		column-count: 4;
	}
	@include media-breakpoint-only(xl) {
		column-count: 5;
	}
}
@media only screen and (max-width: 800px) {
	.blog-header {
		margin-left: 0;
	}
	.fixer {
		position: inherit;
	}
}
/* modal css */
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	padding: 5px 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
	position: relative;
	margin: auto;
	padding: 0;
	width: 85%;
	max-width: 1200px;
	border: none;
	background-color: transparent;
}

.my-slides {
	text-align: center;
}

.portrait-image {
	height: 98vh;
}

.close {
	color: #fff;
	position: absolute;
	top: 10px;
	right: 25px;
	font-size: 48px;
	font-weight: bold;
	transition: 0.3s ease;
}

.close:hover,
.close:focus {
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

.prev,
.next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -50px;
	color: #fff !important;
	font-weight: bold;
	font-size: 3em;
	transition: 0.6s ease;
	border-radius: 0 3px px 0;
	user-select: none;
	-webkit-user-select: none;
}

.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

.next:hover,
.prev:hover {
	background-color: rgba(0, 0, 0, 0.8);
}
.modal-content img {
	width: auto;
	height: 100%;
}
.firsty {
	margin-top: 6em;
}
.heading {
	font-size: 3em;
	color: #ffa500;
	margin-top: 3em;
	display: block;
}