body	{
	font-family: Helvetica, sans serif;
	color: #2b333b;
	font-size: 16px;
	padding-bottom:75px;
	}

#sidebar img	{
	margin-left: 60px;
	margin-top: 50px;
	border-radius: 5px;
	width: 100px;
	}
	
#sidebar	{
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 225px;
	background: #2b333b;
	}

#sidebar a	{
	color: #ffffff;
	text-decoration: none;
	font-family: Helvetica, sans serif;
	}

.collapsible {
    color: #ffffff;
    font-size: 16px;
    text-decoration:none;
    font-family:Helvetica, sans-serif;
    background: #2b333b;
    outline: none;
    border: none;
    padding: 0 0;
}

#sidebar a:hover {
	color:#e6b34d; /* #d29b2d; original */
	}

.collapsible:hover {
    color:#e6b34d;

}

#sidebar nav ul	{
	list-style-type: none;
	margin-top: 1.5rem;
	margin-left: 1rem;
	}

#sidebar nav ul li	{
	padding: .5rem 0 0;
	}

/* #sidebar nav ul li.active {
    border: 1px solid #efcf8f;
} */

#sidebar nav ul li.active {
    padding-bottom: 1rem;
}

#sidebar nav ul li ul {
    margin-top: 0;
    margin-left: 0;
    padding-top: .5rem;
    padding-left: 1rem;
}

#button_open {
    background: #f2f2f2;
    border: 1px solid #e6b34d;
}

.button_content {
    display: none;
    overflow: hidden;
}


.main	{
	margin-left:250px;
	margin-right:25px;
	}
	
#footer_bar	{
	position: fixed;
	bottom: 0;
	left:0;
	width: 100%;
	height: 3.5em;
	background:#e6b34d; /* #c69739; original */ /* #e6b34d */
	opacity:0.5;
	padding:0 0 20px 0;
	}

#footer_bar nav{
	text-align: center;
	margin-top:0;
	}

#footer_bar ul	{
	padding-left:0;
	}

#footer_bar li	{
	display: inline-block;
	padding: 0 1em;
	}
	
.social	{
	height: 2.8em;
		}
		
#footer_bar:hover	{
	opacity:1;
		}

.main h1 {
	font-size:2.5em;
	color: #2b333b;
	text-align: center;
	letter-spacing: .2em;
	margin-top: 60px;
	padding:30px 30px 10px 30px;
	border-bottom: 1px solid #2b333b;
	margin-bottom:0;
	}
	
.main_about	{
	padding:20px 80px;
	border-bottom:1px solid #2b333b;
	}
	
@media only screen and (max-width:55em)	{

	#sidebar img	{
		float:left;
		width:70px;
		margin-left:10px;
		margin-top:10px;
		}

	#sidebar 	{
		height:4.5em;
		width:100%;
		margin-left:0;
		}
	
	#sidebar nav	{
		text-align:center;
		}
	
	#sidebar ul	{
		margin-top:auto;
		}

    #sidebar nav ul li.active {
        border: 1.5px solid #efcf8f;
        border-radius: 15px;
        background: #2b333b;
}

    .button_content {
        /*background: #2b333b; Use something like #b3b3cc when figure out how to merge the button and the button content*/
        /*border-bottom: 7px solid #efcf8f;*/
        padding: .5rem 0 0 0;
        margin: 0;
        }
	
	#sidebar li	{
		display:inline-block;
		margin: 0 1em;
        vertical-align:top;
		}

    #sidebar nav ul li ul {
        padding: 0;
        /*background: #2b333b;
        outline: .5rem;
        border:.5rem;*/
        }

    #sidebar nav ul li ul li {
        display:block;
        margin: none;
        }
	
	.main	{
		margin:0 10px;
		margin-top:80px;
		}
		
	.main h1	{
		font-size:2em;
		padding:20px 20px 10px 20px;
		}	
		
	.main_about	{
		padding:15px 50px;
			}
}

@media only screen and (max-width:45em)	{

	#footer_bar	{
		height:2.5em;
		padding: 0 0 2em 0;
		}
		
	.social	{
		height:2.5em;
		}

}

@media only screen and (max-width:35em)	{

	#sidebar img	{
		display:none;
		}
		
	#sidebar ul	{
		padding-left:0;
		}
		
	#sidebar li	{
		margin:0 1em;
		}
	
	.main	{
		margin:0;
		margin-top:100px;
		}
		
	.main_about	{
		padding: 25px;
			}
		
}
	
@media only screen and (max-width:27em) {
	
	#sidebar a	{
		font-weight:none;
		}
	
	#sidebar nav ul	{
		margin-left: 0;
		}
		
	#sidebar li	{
		margin:0 .5em;
		}
		
	.main_about	{
		padding:20px;
		}
		
	#footer_bar	{
		opacity:1;
		}
		
}

@media only screen and (max-width:20em) {

	#sidebar	{
		height:5.5em;
		}
		
	#sidebar nav	{
		display: block;
		text-align: left;
		margin-left: 1em;
		margin-top: .75em;
		}
		
	#sidebar nav ul	{
		margin:0;
		}
		
	#sidebar nav li	{
		float:left;
		width:50%;
		margin:0;
		}
		
	.main h1	{
		padding: 5px 5px 10px 5px;
		}
		
	.main_about	{
		padding: 15px;
		}

	#footer_bar li	{
		padding: 0 .5em;
		}
		

}

@media only screen and (max-width:15em) {

	#sidebar	{
		height:6em;
		}
		
	#sidebar nav li	{
		width:40%;
		margin-right:.75em;
		}
		
	.main h1	{
		font-size:1.5em;
		}
		
	.main_about	{
		padding:10px;
		font-size:.9em;
		}
		
	#footer_bar li	{
		padding: 0 .4em;
		}

}
	
/* PORTFOLIO SECTION STARTS HERE */

.header	{
	margin-left:250px;
	text-transform: uppercase;
	border-bottom: 2px solid #2b333b;
	margin-top: 60px;
	letter-spacing: 1.5px;
	}

.portfolio_container	{
	margin-left: 225px;
	margin-top:40px;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	}

.portfolio_piece	{
	font-size: .9em;
	padding: 0 40px 20px 40px;
	box-sizing: border-box;
	-webkit-flex: 1 1 100%;
	-ms-flex: 1 1 100%;
	flex: 1 1 100%;
	}
	
.content	{
	line-height: 1.25em;
	}
	
.content h4	{
	margin-bottom: -1em;
	}

figure {
	float:left;
	margin:0;
	padding:0 10px 0 0;
	}
	
figcaption	{
	color:#737373;
	font-size:11px;
	text-align: right;
	}
	
.portfolio_image	{
	width: 300px;
	}

.portfolio_piece .content h4 { margin-top: 0; }
	
.portfolio_piece a	{
	color: #e6b34d; /* #c69739; original*/ /* or #d29b2d */
	}

@media only screen and (max-width:70em)	{

	/* Why isn't the body's 75px bottom padding not kicking in??? Does the code only recognize the lower bounds of the first element in a row, the lower bounds of the element floated to the left???*/
	
	.portfolio_container {
		padding-bottom: 1400px;
		}
	
	.portfolio_piece	{
		-webkit-flex-basis: 50%;
		-ms-flex-preferred-size:50%;
		flex-basis: 50%;
		}
		
	figure	{
		padding:0 0 10px 0;
		}
	
	.portfolio_image	{
		width:100%; /* is there a way to put .portfolio_image within .portfolio_piece ABOVE content within .portfolio_piece ?? */
		}
		
	.content h4	{
		margin-bottom: auto;
		text-transform:uppercase;
		}
		
}

@media only screen and (max-width:55em)	{

	.header	{
		margin-left:85px;
		margin-top:100px;
		}
		
	.portfolio_container	{
        margin-left: 85px;
		}
		
}

@media only screen and (max-width:45em) {

	.portfolio_container	{
		padding-bottom:75px;
		}
	
	.portfolio_piece	{
		-webkit-flex-basis: 100%;
		-ms-flex-preferred-size: 100%;
		flex-basis: 100%;
		padding: 0 0 20px 0;
		}
		
	.content h4	{
		margin-bottom: -1em;
		}
	
	figure	{
		padding:0 10px 10px 0;
		}
	
	.portfolio_image	{
		width:250px;
		}
		
}

@media only screen and (max-width:35em)	{

	.header	{
		margin-left:10px;
		}
		
	.portfolio_container	{
		margin-left: 10px;
		margin-right:10px;
		}
		
	.portfolio_piece	{
		padding: 0 0 25px 0;
		}
		
	figure	{
		padding:0 20px 10px 0;
		}
		
}

@media only screen and (max-width:30em) {

	figure	{
		float:none;
		text-align:center;
		}
		
	figcaption	{
		text-align:center;
		}
		
	.portfolio_piece	{
		padding: 0 0 30px 0;
		}
		
	.content h4	{
		text-transform:none;
		margin-right:25px;
		}

}

@media only screen and (max-width:17em) {

	.portfolio_image	{
		width:225px;
		}
		
	.content	{
		text-align:center;
		}
		
	.content h4	{
		margin-right:0;
		}
	
	.portfolio_piece	{
		padding: 0 0 40px 0;
		}

}
		

/* RESUME SECTION STARTS HERE */

.resume_container	{
	margin-left: 250px;
	}
	
.resume_container h3	{
	margin-top: 40px;
	margin-bottom: 0;
	}

.work_period	{
	float:left;
	font-size:.95em;
	font-style:semi-bold;
	color:#e6b34d; /* original!! #c69739 */
	border-bottom: 1px solid #c69739;
	}
	
.work_period p	{
	margin-bottom: 0;
	}	
	
.work_history	{
	margin-left:250px;
	}	
	
.resume_item	{
	padding: 10px 25px 0 0;
	}
	
.job_title {
	font-weight: bold;
	font-size:.9em;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-bottom:0;
	}

.employer	{
	margin-top: .1em;
	font-size: .9em;
	font-style:italic;
	}
	
.job_description	{
	font-size: .9em;

	}
	
	/* Education section */
	
.education_item	{
	padding: 10px 25px 0 0;
	}
	
.education_period	{
	float:left;
	font-size:.9em;
	font-style:semi-bold;
	color:#e6b34d; /* original!! #c69739  */
	}
	
.education_period p {
    margin-bottom:0;
	}

.education_history	{
	margin-left:250px;
	}
	
.school	{
	font-weight: bold;
	font-size:.9em;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-bottom:0;
	}

.place {
	font-weight:normal;
	font-size:.9em;
	margin-top:.1em;
	margin-bottom:0;
	}

.degree	{
	margin-top: .1em;
	font-size: .9em;
	font-style:italic;
	}
	
@media only screen and (max-width:55em)	{

	.resume_container	{
		margin-left:85px;
		}
		
	.work_history	{
		margin-left:215px;
		}
		
	.education_history	{
		margin-left:215px;
		}
		
	.work_period	{
		font-weight:normal;
		font-size:.9em;
		}	
		
	.education_period 	{
		font-weight:normal;
		font-size:.9em;
		}
		
}

@media only screen and (max-width:45em) {

	.work_period	{
		float:none;
		border-bottom: none;
		}
		
	.work_history	{
		margin-left:10px;
		}
		
	.education_period	{
		float:none;
		}
		
	.education_history	{
		margin-left:10px;
		}

}

@media only screen and (max-width:35em)	{

	.resume_container	{
		margin-left:10px;
		}
	
	.work_history	{
		margin-left:0;
		}
		
	.education_history	{
		margin-left:0;
		}
		
	.job_title	{
		margin-top: .25em;
		}
		
	.school	{
		margin-top:.25em;
		}

}

@media only screen and (max-width:25em)	{
		
	.resume_container h3	{
		margin-top:15px;
		}
		
	.resume_item	{
		padding-top:0;
		padding-bottom:10px;
		}
		
	.education_item	{
		padding-top:0;
		padding-bottom:10px;
		}
		
}

/* DATA SECTION STARTS HERE*/

    .data_container {
        margin-left: 250px;
        margin-top: 40px;
    }

    .data_image {
        display:block;
        margin-left:auto;
        margin-right:auto;
        padding-top:10px;
        padding-bottom:10px;
        width: 75%;
    }

@media only screen and (max-width:55em)	{

	.data_container	{
		margin-left:85px;
		}
		
		
}

@media only screen and (max-width:35em) {

    .data_container {
        margin-left:10px;
    }
}

/* MULTIMEDIA SECTION STARTS HERE */

.multimedia_container	{
	margin: 40px 20px 0 250px;
	}
	
.multimedia_element	{
	padding-bottom:30px;
	border-bottom: 1.5px dashed #c69739;
	}
	
.multimedia_element p 	{
	padding: 0 40% 0 0;
	line-height:1.25em;
	}
	
@media only screen and (max-width:55em)	{

	.multimedia_container	{
		margin-left:85px;
		}
		
	.multimedia_element p {
		padding: 0 80px 0 0;
		}
		
}

@media only screen and (max-width:35em)	{

	.multimedia_container	{
		margin-left:10px;
		}
		
	.multimedia_element {
		padding: 0 10px;
		}
		
	.multimedia_element p {
		padding:0 10px;
		}
		
}

@media only screen and (max-width:25em)	{

	.multimedia_container	{
		margin-top:20px;
		}
}

/* style for all header classes */

@media only screen and (max-width:20em)	{

	.header	{
		margin-top:120px;
		}
		
}