/*Tag Styles*/
img{
	width: 100%;
}
body{
	margin-top: 40px;
}
html {
  scroll-behavior: smooth;
}
p{
	margin: 0;
	margin-bottom: 1em;
}
/*General Classes*/



.text-center{
	text-align: center;
}
.white{
	color: #fff;
}
.inline{
	display: inline-block;
}
.full-width{
	position: relative;
	width: 100%;
}
.bottom-padding-30{
	padding-bottom: 30px;
}
.no-padding{
	padding: 0;
}
.img-right{
	float: right;
	width: 30%;
	margin: 20px;
}
.img-left{
	float: left;
	width: 30%;
	margin: 20px;
}
/*Header*/
#nav-bar{
	/*make follow through scroll*/
	position: fixed;
	top: 0;
	background-color: #fff;
	width: 100%;
	z-index: 100;
	box-shadow: 0px 6px 16px 0px rgba(0,0,0,0.2);
}/*Maybe border once scrolled past bio?*/
.dropbtn {
	color: #007bff;
	border: none;
	padding: 0;
	border-radius: 4px;
	padding: 8px 16px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
 position: relative;
 display: inline-block;

}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
 display: none;
 position: absolute;
 background-color: #f1f1f1;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
 padding: 12px 16px;
 display: block;
 text-decoration: none;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
	background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
	display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
	background-color: #0069d9;
	color: white;
}

/*Bio*/
#bio{
	-webkit-box-shadow: 0px 9px 5px 0px rgba(0,0,0,0.68);
	-moz-box-shadow: 0px 9px 5px 0px rgba(0,0,0,0.68);
	box-shadow: 0px 9px 5px 0px rgba(0,0,0,0.68);
	/*Drop Shadow*/
	padding: 10px;
}
#bio p{
	padding: 20px 0;

}
#name-container{

}
#name{
	display: flex;
	  justify-content: center;
	  flex-direction: column;
	  height: 100%;
	/*center vertically*/
}


/*Post Feed*/
#work{
	padding-top: 30px;
	/*background color gray #16191b*/
	background-color: #1c2023 ;
}
.feed-item{
	background-color: #fff;
	margin: 40px 0;
	box-shadow: 0px 6px 16px 0px rgba(0,0,0,1);
}
.feed-pic{
	padding: 0;
	overflow: hidden;
	height: 260px;
}
.center-img{
	z-index: 1;
	height: 100%;
	width: auto;
	position: absolute;
	left: 50%;
	transform: translate(-50%,0);
}

.feed-more{
	position: absolute;
	right: 10px;
	bottom:10px;
}
.feed-tags{
	position: absolute;
	left: 20px;
	bottom:20px;
}
.feed-bottom{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}
.feed-padding{
	padding: 20px 20px 36px 20px;
}
#see-all{
	position: absolute;
	right: 20px;
	top:-2px;
}
/*Footer*/
#footer{
	position: relative;
	padding-top: 20px;
}
#copywrite{
	text-align: center;
	padding: 20px 0 0 0;
	line-height: 0;
}
/*Post Pages*/
.post{
	padding-bottom: 30px;
}
.post-article{
	background-color: transparent;
	margin: 40px 0;
	position: relative;
}
.post-banner-img{
	width: 50%;
	z-index: 1;
	position: relative;
	left: 25%;
}
@media only screen and (max-width: 992px)  {
.post-banner-img{
	width: 80%;
	left: 10%;}
}
@media only screen and (max-width: 768px)  {

.img-left{
	width: 100%;
	margin: 0;
}
.img-right{
	width: 100%;
	margin: 0;
}
.post-banner-img{
	width: 80%;
	left: 10%;
}
#see-all{
position: relative;
left:-46px;
margin: 50%;
top: 0;
}
.feed-tags{
	position: relative;
	left: 0;
	bottom: 0;
	margin: 20PX 0;
}
.feed-more{
	position: relative;
	left: -50PX;
	bottom: 0;
	margin: 0 0 0 50%;
}
.feed-bottom{
	position: relative;
}
.feed-padding{
	padding: 20px 20px 20px 20px;
}
}
@media only screen and (max-width: 373px)  {
	#bio{
		padding-top:50px;
	}
}
@media only screen and (max-width: 576px)  {
.post-banner-img{
	width: 100%;
	left: 0;

}

.container{
	padding: 0;
}
#work{
	padding-top: 60px;
}

}
.post-backing{
	position: absolute;
	width: 100%;
	left: 0;
	top: 50%;
	transform: translate(0,-50%);
  filter: grayscale(50%)  blur(5px) opacity(80%);
	overflow: hidden;

}
.post-text{
	background-color: #fff;
	padding: 40px;
}
.post-banner{
	width: 100%;
	position: relative;
	overflow: hidden;
}
.float-left{

}
.float-right{

}

/*Msc*/
.hr-line {
	width: 100%;
	position: relative;
	margin: 25px;
	border-bottom: 1px solid #000;
}
.hr-icon {
	position: relative;
	top: 0px;
	color: #ff0000;
}
.hr-icon img {
	height: 50px;
}
.hr-theme-slash-2 {
	display: flex;
}