.caption {
	font-family: Lobster, roboto, sans-serif;
}

#nav {
	background: black;
    position: fixed; 
    top: 0;
	z-index: 1000;
	width: 100%; 
	display: grid;
	grid-template-columns: repeat(11, 1fr);
}

#myName-nav {
	background-color: #337ab7;
	color: white;
}

#myName-nav:hover {
	color: greenyellow;
	background-color: black;
}

#intro {
	background-image: url("../img/p1.jpg");
	width: 100%;
	padding-top: 46px;
	padding-bottom: 40px;
}

#me {
	text-align: center;
	background-color: black;
	opacity: .9;
	padding: 1px;
	width: 45%;
	margin: 28px auto 0;
	border-radius: 10px;
}

.page{
	padding: 20px 5%;
    background: no-repeat center 100%;
    background-size: cover;
}

.page div {
	/*min-height: 300px;*/
}

#myName-intro::before  {
	content: "";
	display: inline-block;
	border: 1px solid white;
	width: 5%;
	margin-right: 2%;
	margin-bottom: 2.5%;
}

#myName-intro::after  {
content: "";
display: inline-block;
border: 1px solid white;
width: 5%;
margin-left: 2%;
margin-bottom: 2.5%;
}

.btnList {
	font-size: .5em;
}

.fa-envelope-open{
	color: orangered;
;
}

.fa-linkedin {
	color: aqua;
}

.fa-medium{
	color: #eeeee4;
}

.fa-github-square {
	color: #6e5494;
}

.fa-stack-exchange {
	color: #ef8236;
}

.fa-youtube {
	color: #D1413F;
}

.fa-bed {
	color: #C3BFBC;
}

.fa-clock {
	color: #ee169a;
}

.fa-hand-holding-usd{
	color: #85bb65;
}

.fa-lightbulb{
	color: yellow;
}

.fa-code{
	color: #C0B283;
}

.btnList {
	margin: 20px;
	text-align: center;
}

.btn-default {
	color: #337ab7;
	background-color: black;
	border-color: black;
	font-size: 1.7em;
}

.author {
	text-align: right;
	margin-right: 10px;
}

#about {	
	background-image: url("../img/p2.jpg");
	width: 100%;
	align-items: center;
	box-sizing: border-box;
}

#myPic img{
	height: 50%;
	width: 50%;
	border-radius: 5%;
	box-sizing: border-box;
	border: 1px double gold;
	border-bottom: 0;
	margin: 5% 20% 0;
}

#portfolio {
	background-image: url("../img/p3.jpg");
}

#portfolio-container > div {
    padding: 5%;
}

#news_influence_stocks > h2 > a {
	color: white;
}

#contact {
    color: black;
	background: url("../img/p4.jpg"); /*inconsistency*/
	padding-right: 0;
    padding-top: 47px;
}

#contact p {
    font-size: 15px;
    text-align: left;
}

#contact button {
	border-radius:8px;
	background-color: wheat;
}

.tooltip {
	position: relative;
	display: inline-block;
	margin-top: 20px;
  }
  
.tooltip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border: 5px solid transparent;
	border-top-color: #555;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

#mc_embed_signup {
	clear:left;
	font:14px Helvetica, Arial, sans-serif;
	width:300px;}

#particles-js {
	background:linear-gradient(45deg,#130c31,#40284c);
	margin: 0 auto;
	position: absolute;
	z-index: -50;
	width: 100%;
	height: 600px;
	overflow: hidden;
}

#books {
	position: relative;
	z-index: 100;
	height: 600px;
	/* background-image: url("../img/lamp.jpg"); */
	/* background-size:100%; */
	margin: 0 auto;
	box-sizing: border-box;
}

.slideshow {
	padding-top: 100px;
	margin: 0 -9px;
	text-align: center;
}

.slideshow img {
	width: 200px;
	padding: 0 9px;
}

.slideshow p {
	font-size: 1em;
}

.slideshow > div {
	overflow: hidden;
}

@media(max-width: 700px) {
	.slick-next {
		right: 0 !important;
	}

	.slick-prev {
		left: 0 !important;
		z-index: 1;
	}
}

@media(min-width: 768px) {
	h1 {
		font-size: 5em;
	}

	a {
		font-size: 1.5em;
	}

	h2 {
		font-size: 2.2em;
	}
	
	p {
		font-size: 2em;
	}

	.btnList {
		font-size: 1em;
	}

	#myName-intro::before  {
		width: 10%;
	}

	#myName-intro::after  {
		width: 10%;
	}

	#nav-right {
		grid-column-start: 8;
	}

	/*fallback if no support for grid*/
	#about {
		display: flex;
		flex-direction: row;
		padding-bottom: 20px;
	}

	.slideshow img {
		width: 390px;
	}

	#particles-js, #books {
		height: 900px;
	}

	/*CSS grid*/
	@supports (display: grid) {
		#about {
			display: grid;
			grid-template-columns: 60% 30% 10%;
			grid-auto-rows: auto;
			align-items: start;
		}

		#myPic {
			grid-column-start: 2;
			margin-top: 140px;
			padding-left: 30px;
		}

		#myPic img{
			height: 100%;
			width: 100%;
		}

		#portfolio-container {
			display: grid;
			grid-template-columns: 50% 50%;
			text-align: center;
			align-items: center;
		}

		.left-text {
			text-align: left;
		}

		#news_influence_stocks {
			margin: auto;
			width: 50%;
		}
	}
}