/* Customize about paragraph */
#about p
{
	line-height: 40px;
	color: #FFF;
	text-align: justify;
}

/* Customize Website Projects section */
#websites div div p
{
	padding-top: 70px;
	margin-bottom: 0px;
	font-size: 1.5vw;
	color: #2d2d30;
}

#websites div div a
{
	text-decoration: none;
}

#websites div div div
{
	opacity: 0.7;
}

#websites div div a:hover
{
	text-decoration: none;
}

/* Customize School Project section */
#school div div p
{
	padding-top: 70px;
	margin-bottom: 0px;
	font-size: 1.5vw;
	color: #FFF;
}

#school div div a
{
	text-decoration: none;
}

#school div div div
{
	opacity: 0.7;
}

#school div div a:hover
{
	text-decoration: none;
}

/* Customize footer */
.footer-dark 
{
	background-color:#162738;
	color:rgba(222, 226, 230, 0.75);
}

/* Customize main headers on website */
div h1
{
	color: red;
	padding-bottom: 20px;
}

/* Customize navigation bar */
.navbar
{
	background-color: red;
	opacity: 0.9;
	border: none;
	font-size: 20px;
}

.navbar-brand
{
	color: black;
	transition: all 500ms;
}

.navbar-brand:hover
{
	color: white;
}

.navbar-nav li a span
{
	padding-right: 5px;
}

.navbar-nav li a
{
	color: white !important;
	transition: all 500ms;
}

.navbar-nav li a:hover 
{
	color: black !important;
}

/* Customize alternating white and natural gray colors */
.bg-1 
{
	background: #2d2d30;
}

.bg-2
{
	background: #eaeaea;
}

/* Customize container padding */
.container 
{
	padding: 80px 120px;
}

/* Customize person icon */
.person 
{
	margin-bottom: 25px;
	margin-right: 25px;
	width: 25%;
	float: left;
	
	transition: transform .8s ease-in-out;
}

.person:hover
{
	transform: rotateX(360deg);
}

/* Resize depending on device/screen size */
@media (max-width: 770px) 
{
	#websites div div a p
	{
		font-size: 4vw;
	}
	
	#school div div a p
	{
		font-size: 4vw;
	}
	
	.person
	{
		width: 50%;
	}
	
	.container 
	{
		padding: 80px 50px;
	}
}