/* Version 27012022 */

/* Google Font - Nunito and Space Mono */
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
@import url('https://fonts.googleapis.com/css?family=Fira+Sans');

* {
	-webkit-transition: all 0.15s ease-in-out;
	-moz-transition: all 0.15s ease-in-out;
	transition: all 0.15s ease-in-out;
}

/* 
Blue: #545EEE
Light Blue: #B3B7F0;
Red: #FF4D5B;
Light Red: #F6C0C4;
Not-quite-black: #2B2B2B;
Light-grey: #99999a;
Off-white: #FAFAFA;
*/

html {
	padding: 4% 4%;
	margin:0 auto;
	max-width: 1200px;
}

body {
	font-family: 'Fira Sans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 32px;
	color: #2b2b2b;
	background-color: #ffffff;
	}

h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, span, blockquote {
    margin: 0;
	padding: 0;
}


h1 {
	display: inline-block;
	font-size: 1.3rem;
	font-weight: 700;
	color: #2b2b2b;
}

h3 {
    font-size: 0.7em;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: #99999a;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

p {
	margin: 0 0 1rem 0;
	padding: 0;
}

a {
	color: #545EEE;
	text-decoration: none;
	border-bottom: 1px solid #545EEE;
}

	a:hover {
		color: #545EEE; 
		border-bottom: 1px solid #545EEE; 
		font-style: italic;
	}

	a:active {
		color: #545EEE;
		font-size: 110%;
		line-height: 95%;
	}

hr {
	border: 0;
	height: 1px;
	background: #DFDFDF;
	margin-top: 40px;
}

img.mugshot {
	display: inline-block;
	height: 72px;
	width: 72px;
	object-fit:cover;
	border-radius: 50%;
	background: #99999a;
	filter: grayscale(80%);
}

	img.mugshot:hover {
		filter: grayscale(0%);
	}

.container {
	width:100%; 
	margin-top:40px;
}

.container.intro {}
	
	span.more {
		display: none;
		color: #99999a;
		font-size: 0.95em;
		padding-bottom: 16px;
	}
	
	a.more {
		color: #FFFFFF; 
		border-bottom: 0px solid #FF4D5B; 
		cursor: pointer;
		display: inline-block;
		margin-left: 16px;
		padding: 0px 8px;
		background: #FF4D5B;
		border-radius: 100%;
	}

	a.more:hover {
		color: #FFFFFF; 
		padding: 0px 8px;
		border-bottom: 0px solid #FF4D5B; 
		font-style: normal;
	}

.container.experience {
	width:100%;
}

.container.contact {
	width:100%;
}

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

ul.experience {
	list-style: none; 
	padding: 0;
}
	ul.experience li {
		display: block;
	}
	ul.experience span.year {
		color: #99999a; font-size: 0.7em;
	}

ul.social {
	display: inline-block; 
	list-style: none; 
	margin: 0em 0em 2em 0em; 
	padding: 0;
}
	ul.social li {
		display: inline-block;
		width: 48px;
		height: 48px;
		margin-bottom: 0.5rem;
	}
	ul.social li a {
		color: #495456;
		display: flex;
		width: 48px;
		height: 48px;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		border-radius: 50%;
		background-color: #ecebea;
    }
	ul.social li:first-of-type a {
		padding-left: 0px;
	}
	ul.social li span.text {
		display: none;
	}
	ul.social li a:hover {
		background-color: #545EEE;
		color:#FFFFFF ;
	}

/* 
Small devices (landscape phones, 576px and up) 
*/
@media (min-width: 576px) { 
	html{padding: 2% 5%;}
	.container {width:70%;}
	ul.social {margin: 0;}

}


/*
Medium devices (tablets, 768px and up) 
*/
@media (min-width: 768px) {
	.container {width:50%; margin-top: 60px; vertical-align: top;}
	header {margin-top: 36px;}
	.container.intro {margin-top: 40px;}
	.container.experience {width: 85%;}
}

/*
Large devices (desktops, 992px and up)
*/
@media (min-width: 992px) {
	.container {width:50%;}
}


/*
Extra large devices (large desktops, 1200px and up)
*/
@media (min-width: 1500px) { 
	.container {width:50%;}
}