body {
	position: relative;
	text-decoration: none;
}
body,
.header,
.translucent-bg,
.translucent-bg h1,
.translucent-bg h2,
.translucent-bg h3,
.translucent-bg h4,
.translucent-bg h5,
.translucent-bg h6,
.translucent-bg a,
.translucent-bg.green:after,
.navbar-nav > li > a,
.navbar .navbar-nav > li > a.active,
.bars > .fa-bars,
h1 > span {
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
.header {
	background-color: rgba(219, 219, 219, 0.5);
}
.navbar-nav {
	min-height: 3em;
}
.navbar-nav > li > a {
	color: black;
    padding: 10px;
    margin-right: 30px;
	font-size: 20px;
	font-weight: 300;
	border-radius: 15px;
}
.navbar .navbar-nav > li > a.active {
	color: #029c02;
	background-color: rgba(201, 201, 201, 0.2);
}
.navbar .navbar-nav > li > a:hover {
    color: lightblue;
}
.site-name {
    font-size: 28px;
    font-family: Impact, 'Arial Narrow Bold', sans-serif;
    float: right;
    margin-top: 12px;
}
.site-name > a {
    color: black;
}
.theme-btn {
	font-size: 32px;
	float: right;
	margin-top: 8px;
}
.theme-btn > .fa-sun:hover {
	color: yellow;
	cursor: pointer;
}
.theme-btn > .fa-moon:hover {
	color: grey;
	cursor: pointer;
}
.bars {
	display: none;
}
.banner {
    width: 100%;
    min-height: 100%;
	position: relative;
}
.banner-image > img {
	width: 100%;
    background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.banner-caption {
	position: absolute;
	top: 30%;
	width: 100%;
	z-index: 2;
}
h1 {
    font-size: 60px;
    font-weight: bold;
}
h1 > span {
    color: green;
}
.slogan {
    font-size: 28px;
    font-weight: bold;
}
.section {
    padding: 80px;
}
.space {
    padding: 20px;
}
.pr-10 {
    padding-right: 10px;
}
.media .fas {
	font-size: 24px;
	width: 40px;
	height: 25px;
	line-height: 25px;
	padding: 5px;
	text-align: center;
}
.translucent-bg,
.translucent-bg h1,
.translucent-bg h2,
.translucent-bg h3,
.translucent-bg h4,
.translucent-bg h5,
.translucent-bg h6,
.translucent-bg a {
	color: #ffffff;
}
.translucent-bg {
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important;
	background-position: 50% 0;
	background-repeat: no-repeat;
	z-index: 1;
	position: relative;
}
.translucent-bg .translucent-bg {
	margin-top: 80px;
	z-index: 3;
}
.translucent-bg:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
}
.translucent-bg.green:after {
	background-color: rgba(90, 238, 85, 0.4);
}
.translucent-bg .container {
	z-index: 3;
	position: relative;
}
.text-shadow {
	text-shadow: 0 0 3px #eee, 0 0 5px #eee;
}
.bg-images {
    background: url("../images/Nature-Mountain-Water-Fall-wallpapers-background.webp") 50% 0px no-repeat;
}
.bg-logo-list {
	background: url("../images/spring_day_wallpapers_fantastic_river_background_hd_3252.webp");
	min-width: 100%;
}
.list-unstyled li {
	padding: 5px 0;
}
.list-horizontal {
	padding: 10px 0;
}
.hide {
	display: none;
	margin-left: 10px;
	margin-top: 6%;
	float: right;
}
.hover > .logo > a > i {
	font-size: 62px;
}
.hover:hover .hide {
	display: block;
}
.hover:hover .logo a {
	color: rgb(0, 75, 161);
}
.list-horizontal-space {
	padding-left: 40px;
	padding-right: 40px;
}
.about_me_img {
	width: 100%;
}

/* ########## --> Scrollbar Style <-- ########## */
/* width */
::-webkit-scrollbar {
  width: 14px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #202324; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #494f52; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #5b6367;
}

/* ########## --> Mobile Device Designs <-- ########## */
@media (max-width: 991px) {
	#topnav .col-md-7 {
		display: none;
	}
	.responsive .col-md-7 {
		display: flex !important;
	}
	.bars {
		position: relative;
		display: block;
		font-size: 24px;
		float: left;
		margin: 4px 12px;
	}
	.bars > .fa-bars:hover {
		color: rgb(159, 209, 226);
		cursor: pointer;
	}
	.site-name {
		display: none;
	}
	.navbar {
		margin-left: 100px;
		top: -40px;
	}
	.nav-item > a {
		font-size: 18px !important;
		margin: 0 !important;
		padding: 5px !important;
	}
	.theme-btn {
		position: absolute;
		font-size: 24px;
		margin: 4px 12px;
		margin-left: 85%;
		top: -45px;
	}
	.responsive .theme-btn {
		top: -172px;
	}
	.banner-caption {
		top: 25% !important;
	}
	h1 {
		font-size: 36px !important;
	}
	.slogan {
		font-size: 20px !important;
	}
	.list-horizontal-item {
		margin: 10px 0 !important;
	}
	.list-horizontal-space {
		padding: 0 20px !important;
	}
	.hover:hover .hide {
		display: none !important;
	}
	.logo > a > i {
		font-size: 42px !important;
	}
}


/* ########## --> Dark Mode <-- ########## */
.dark-theme {
	color: rgb(209, 205, 199);
    background-color: rgb(24, 26, 27);
}
.dark-theme .header {
	background-color: rgba(44, 48, 50, 0.5);
}
.dark-theme .navbar-nav > li > a,
.dark-theme .translucent-bg,
.dark-theme .translucent-bg h1,
.dark-theme .translucent-bg h2,
.dark-theme .translucent-bg h3,
.dark-theme .translucent-bg h4,
.dark-theme .translucent-bg h5,
.dark-theme .translucent-bg h6,
.dark-theme .translucent-bg a,
.dark-theme h4, a {
	color: rgb(232, 230, 227);
}
.dark-theme .navbar-nav > li > a.active {
	color: rgb(95, 253, 95);
    background-color: rgba(54, 59, 61, 0.2);
}
.dark-theme .navbar-nav > li > a:hover {
	color: rgb(159, 209, 226);
}
.dark-theme .site-name > a {
    color: rgb(209, 205, 199);
}
.dark-theme h1 > span {
	color: rgb(60, 200, 60);
}
.dark-theme .translucent-bg.green:after {
	background-color: rgba(51, 148, 15, 0.4);
}
.dark-theme .text-shadow {
	text-shadow: 0 0 3px #000, 0 0 5px #000;
}