@import url(https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/fonts/slick.woff);
* {
	box-sizing: border-box;
}

body {
	font-family: helvetica, arial, "Trebuchet MS", sans-serif;
	font-size:100%;
	letter-spacing:-0px;
	line-height:1.5;
	background-color:#969696;
	font-weight: 100;
	margin: 0;
	padding: 0;
}

body.resume #main p, body.resume #main ul {
	font-size: .875em;
}
body.resume #main h3 {
	font-size: 1em;
}

.d-none {
	display: none;
}

.opaque {
	opacity: 1 !important;
}

p, li {
	margin-top:0;
	font-weight:100;
}

p, ul {
	margin-bottom: 1em;
}

a {
	color:#F57025;
	text-decoration:none;
}

a:focus { 
    outline: none; 
}
	
a:hover {
	color:black;
}

ul {
	list-style-type: none;
	margin-top: 0;
	padding: 0;
}

li {
}

h3 {
	font-size: .875em;
	margin: 0;
}

h4 {
	font-size: .875em;
	color: #969696;
	margin: 0;
}

h2 {
	font-size:2em;
	font-weight:100;
	color:#00A8A7;
	margin-top:0;
	line-height: 1.5;
	margin-bottom: 0;
}

h2 span {
	font-size: .5em;
	font-weight: 400;
	color: black;
	display: block;
	margin-bottom: 1em;
}
	
h1.title {
	font-size:2em;
	margin: 0;
	line-height: 1;
	white-space: nowrap;
}

h1 span {
	display: block;
	font-size: .5em;
	color: #969696;
}
	
.bio p {
	font-size: 1em;
}

#container {
	position:relative;
	margin:5% auto;
	padding:5%;
	width:85%;
	height:auto;
	background-color:white;
	box-shadow: 0 1px 1px rgba(0,0,0,0.12), 
              0 2px 2px rgba(0,0,0,0.12), 
              0 4px 4px rgba(0,0,0,0.12), 
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);
}

	.left-column {
		flex-basis: 30%;
		padding-right: 4%;
		min-width: 0;
		min-height: 0;
	}

	.right-column {
		flex-basis: 70%;
		flex-grow: 1;
		min-width: 0;
		min-height: 0;
	}

	#header {
		width: 100%;
		display: flex;
		align-items: baseline;
		margin-bottom: 2em;
	}

		#navbar {
		}

		.navlink {
			margin-right: 1em;
			padding-bottom: 2px;
			white-space: nowrap;
		}

		.navlink.selected {
			color: black;
			border-bottom: 1px solid black;
		}

	#main {
		display: flex;
		width: 100%;
	}

		.sidebar-content {
			padding-top: 2em;
		}


.main-content-holder {
	display: flex;
	justify-content: space-between;
	width: 100%;
	position: sticky;
	top: 2em;
}

.bracket-left, .bracket-right {
	flex-basis:10%;
	max-width: 40px;
	min-width: 20px;
	position: relative;
	border-top: 10px solid #969696;
	border-bottom: 10px solid #969696;
	}

	.bracket-left {
		border-left: 10px solid #969696;
	}

	.bracket-right {
		border-right: 10px solid #969696;
	}
			
#portfolionav {
	margin-top: 1em;
	display: flex;
}

#portfolionav a {
	outline:none;
	display:block; 
	text-decoration:none; 
	opacity: .4;
	position:relative;
	transition: all .2s ease-in-out;
	margin-right: 2%;
	max-width: 40px;
}

#portfolionav a:last-child {
	margin-right: 0;
}
	
#portfolionav a img {
	width:100%;
	height:auto;
	display:block; 
	border:0;
	}

@media (hover: hover) and (pointer: fine) {
	#portfolionav a:hover {
		text-decoration:none; 
		transform: scale(2);
		transform-origin: center;
		z-index: 500;
		opacity: 1;
		box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3);
		transition: all 0.2s ease-in-out;
		}
}



/*---------------------------------------
This is the main center portfolio stuff*/

.main-content {
	height:auto;
	padding: 2em 5%;
	overflow: hidden;
	}
/*
#portfoliocontent:not(.resume) {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
}
*/

#portfoliocontent {
	width: 100%;
}


body.graphic-design #portfoliocontent video, body.graphic-design #portfoliocontent img {
	flex: 0 0 auto;
	align-self: start;
	width: 100%;
	height: auto;
}

.slick-next:before, .slick-prev:before {
	color: #969696 !important;
}

/* MEDIA QUERIES */
@media only screen and (max-width : 1000px) {
	#container {width: 90%;}
}

@media only screen and (max-width : 768px) {
	#header {
		display: block;
	}
	#main {flex-direction: column-reverse;}
	.left-column, .right-column {width: 100%;}
	.main-content-holder {position: static;}		
	#container {width: 95%;}
	h1 span {display: inline;}
}

@media only screen and (max-width : 414px) {
	.navlink {display: block;}
	#container {width: 100%; margin: 0;}	
}