@charset "UTF-8";
/*
	headline: font-family: 'Roboto', sans-serif;
	paragraph: font-family: 'Source Serif 4', serif;
*/

/*Portfolio website colors
	White: #FFFFFF
	pink-beige: #FED6B9
	Orange-red: #FFA56B
	Yellow: #FFC159
	Greeen: #539F9A
	Dark green: #0D4F4B
	Black: #000000
*/

/*Background and text color Code*/

/* Background color for navbar and dropdown menus */
.navbar-custom, .navbar-custom .dropdown-menu {
background-color: #0D4F4B;
}
/* Text color for navbar and dropdown menus */
.navbar-custom .navbar-brand, .navbar-custom .navbar-text,
.navbar-custom .navbar-nav .nav-link,
.navbar-custom .dropdown-item {
color: #FFFFFF;
}
/* Background and text colors for current page link and links on hover and focus */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus {
background-color: #539F9A;
color: #FFFFFF;
}
/* Border and text colors for menu icon on small screens */
.custom-toggler.navbar-toggler {
border-color: #FFC159;
color: #FFFFFF;
}
/* Hamburger icon - use same rgb values as previous rule for stroke */
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,193,89,1.00)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/*Custom font for navigation or navbar*/
.navbar-custom {
	font-family: 'Roboto', sans-serif;
	font-size: 1rem;
}

/*Custom font for headlines*/
h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto', sans-serif;
	font-size: 1.5rem;
}


/*Custom font for paragraph*/
p{
	font-family: 'Source Serif 4', serif;
	font-size: 0.75rem;
}

/*navbar-brand logo*/

.navbar-brand {
    background-image: url(../images/my_website_Logo_v2.png);
    background-repeat: no-repeat;
    background-size: 36px auto;
    background-position: 6px center;
    padding-left: 62px;
}


/* header banner section*/
#home_banner{
	padding-left:0px;
	padding-right:0px;
	position: relative;
	
}

/* rem values are relative to the root html element, 1rem=16px (rem= responsive size)*/
#home_banner h1{
	font-size: 4rem;
	color: #FFFFFF;
	position: absolute;
	bottom: 40%;
	left: 16%;
	right: 15%;
	text-align: center;
	
}

#aboutPage_Portrait{
	display: flex;
	justify-content: center;
}

/*Sub-headline before main sections*/
/* creates a flexbox that centers all content in subheadline*/
.sub_headline{
	display:flex;
	justify-content: center;
}

.sub_headline h2{
	font-size: 1.5rem;
	text-align: left;
}

.sub_headline p{
	font-size: .9rem;
	text-align: left;
	
}
/*end of Sub-headline*/

/*centering the text on 3 column section*/
.main_section h2{
	font-size: 1.5rem;
	text-align: center;
	margin: 20px;
}

.main_section p{
	margin-top: 20px;
	font-size: 1rem;
	text-align: center;
}



.thumbnail_Resize img{
	width: 100%;
	height: 50%;
	object-fit: contain; 
	
}

/* Added to each column class*/
.column_hover:hover{
	background-color: #FFC159;
	border-radius: 2rem;
	transition: .2s;
}
/* End of 3 column section*/


/*start of Featurette css*/

.featurette {
	text-align: center;
	display: flex;
}
.featurette-heading {
	padding-top: 60px;
	line-height: 1;
	letter-spacing: .03rem;
}
/*end of Featurette css*/


/*Footer section*/
footer{
	font-size: 1.1rem;
	line-height: 60px;
	text-align: center;
	color: #FFFFFF;
	background-color: #539F9A;
}

/* Media Query (breakpoints)*/
/* Small devices only*/
@media (min-width:375px){
	#home_banner h1 {
		font-size: 1.2rem;
		bottom: 35%;
		left: 9%;
		right:9.3%;
		text-align: center;
		}
	.sub_headline h2{
		font-size: 1rem;
	}
	.sub_headline p{
		font-size: .9rem;
	}
	#aboutPage_Portrait img{
		width: 60%;
		margin-left: 20%;
	}
}


/*SMALL SIZE ONLY*/
@media screen and (min-width:576px){
	#home_banner h1 {
		font-size: 1.9rem;
		bottom: 35%;
		left: 8%; /*pushes from left to center text*/
		right:8%; /*pushes from right to center text*/
		text-align: center;
		}
	.sub_headline h2{
		font-size: 1.4rem;
	}
	.sub_headline p{
		font-size: .9rem;
	}
	#aboutPage_Portrait img{
		width: 50%;
		margin-left: 26%;
	}
}

/*MEDIUM SIZE ONLY*/
@media (min-width: 768px) {
	#home_banner h1 {
		font-size: 2.5rem;
		bottom: 37%;
		left: 10%;
		right: 10%;
		text-align: center;
	}
}


/*LARGE SIZE ONLY*/
@media screen and (min-width:992px){
    #home_banner h1 {
        font-size: 3.3rem;
		bottom: 38%;
		left: 10%;
		right: 10%;
		text-align: center;
    }
	.sub_headline h2{
		font-size: 1.4rem;
	}
	.sub_headline p{
		font-size: .9rem;
	}
	#aboutPage_Portrait img{
		width: 55%;
		margin-left: 24%;
	}
}