/*Custom Styles for page*/

/*Fonts*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
/*End Fonts*/
html{
	position:relative;
	min-height:100%;
	
}

body{
	margin-bottom:80px; /*padding bottom = footer height*/
	background-color:#f3f3f3;
	font-family: 'Montserrat', sans-serif;
	overflow-x:hidden;
}

#body-wrapper{
	margin-left: calc(100vw - 100%);
}
main{
	padding-bottom:15px; 
}

main p{
	font-size:1.35rem;
}

.nav-item{
	margin:0 10px;
	border-radius:3px;
}

.main-menu-item{ /*The top page link in dropdown menu*/
	font-weight:bold;
	border-bottom:1px solid #c0c0c0;
}
/* .navbar .active{
	background-color:#888;
	color:#f3f3f3;
}

.navbar .nav-item:hover{
	background-color:#888888;
	color:#f3f3f3;
}

a.nav-link{
	color:rgba(0,0,0,0.5);
}
.navbar .nav-item a.nav-link:hover{
	color:#f3f3f3;
} */
.jumbotron{
	padding:0;
	border:2px solid gray;
}
.jumbotron img {
	width:100%;

}
.footer{
	position:absolute;
	bottom:0;
	width:100%;
	height:80px; /* Set the fixed height of the footer here*/
	line-height: 60px; /* Vertically center the text here*/
	clear:both;
	background-color:#c0c0c0;
	color:rgba(0,0,0,0.5);
}

.footer a{
	margin-right:10px;
	vertical-align:middle;
	color:rgba(0,0,0,0.5);
}

.footer a:hover{
	text-decoration:none;
	color:#f3f3f3;
}
.footer .container{
	padding:0 20px;
	height:60px;
	margin-bottom:0;
	position:relative;
}

#footer-bg{z-index:-1;}
#copyright{
	position:absolute;
	bottom:5px;
	right:5%;
	display:block;
	height:20px;
	line-height:20px;
}

@media (max-width:991.98px){
	#navbarNavDropdown .nav-item{
		max-width:200px;
	}
}

@media (max-width:767.98px){
	.footer a{
		font-size:0.85em;
	}
	#copyright{
		font-size:0.75em;
	}

	
	
}

/*Portfolio Page styles*/

#portfolio-main{
	margin-top:20px;
}
#portfolio-main h1{
	Margin-bottom:30px;
	text-align:center;
	font-size:3.5em;
}
#portfolio-main a{
	text-decoration:none;
	color:rgba(0,0,0,0.5);
}

#portfolio-main section{
	margin-bottom:30px;
}

.portfolio-section{
	position:relative;
	height:200px;
	min-height:200px;
	background-image:url("images/header-splash.jpg");
	background-repeat:no-repeat;
	background-size:100% auto;
	background-position:center center;
}

#portfolio-web-development{
	background-image:url("images/portfolio-web-dev.jpg");
	background-size:auto 150%;
	background-position:-250px 0;
}

#portfolio-graphic-design{
	background-image:url("images/portfolio-graphic-design.jpg");
	background-position:0 0;
	
}

.portfolio-title{
	position:relative;
	top:60%;
	background-color:rgba(255,255,255,0.70);
	height:40%;
	font-size:30px;
	line-height: 80px;
}

.portfolio-title span{margin-left:10px;}

@media (min-width:576px){
	.portfolio-title{
		font-size:45px;
	}


}

/* end Portfolio Page styles*/

/* Web Development Page styles*/
.image-wrapper{
	padding:10px;
	padding-bottom:20px;
	overflow:hidden;
}
.imgage-wrapper img{
	position:absolute;
	clip:rect(0px, 150px, 150px, 0px);
}

#portfolio-page-web-development h1
{
	margin-bottom:50px;
}
/*Resume Page styles*/
#resume-bg{
	
	background-image:url("images/resume-bg.png");
	background-repeat:no-repeat;
	background-position:100% 100%;

}



@media(max-width:991.98px){
	#resume-bg{
		background-size:50% auto;
	}
}

@media(max-width:575.98px){
	#resume-bg{
		background-size:50% auto;
		background-repeat:no-repeat;
		background-position:100% 100%;
	}
}

/*End Resume Page Styles*/

/*Contact Page Styles*/
#contact-bg{
	background-image:url("images/contact-bg.png");
	background-repeat:no-repeat;
	background-position:80% 100%;
	background-size:auto 100%;
	height:100%;
}

#contact-bg input, #contact-bg textarea{
	background-color: rgba(255,255,255,0.85);
}
/*End Contact Page Styles*/