@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,500;1,600&family=Montserrat&display=swap');
		
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}

		body {
			display: flex;          /* Make the body a flex container */
			flex-direction: column; /* Stack header, main, footer vertically */
			font-family: 'Montserrat', sans-serif;
			font-size: 14px;
			line-height: 1.5;
			background-color: #ffffff;
			color: #545454;
		}
		
		header {
			display: flex;
			justify-content: space-between; /* Logo on left, nav on right */
			align-items: center;
			background-color: #545454;
			padding: 0.5em 1em;
		}
		
		.logo .about-logo img {
			display: block;
		}

		.container {
			max-width: 970px;
		}
		nav ul {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
		}

		nav li {
			margin-left: 1em;
		}

		nav a {
			color: #ffffff;
			text-decoration: none;
			padding: 0.5em;
		}

		nav a:hover {
			background-color: #0055b3;
		}
		
		main {
			flex: 1 0 auto; /* Takes remaining vertical space, pushing footer to bottom */
			padding: 1em;
			text-align: center; /* Center text in main content */
		}

		h1 {
			font-family: 'Lora', serif;
			font-size: 3.214em;
			font-weight: 400;
			color: #545454;
			text-align:	center;
			margin: 20px 0;			
		}
		
		h2 {
			font-family: 'Lora', serif;
			font-size: 2.857em;
			font-weight: 400;
			color: #545454;
			margin: 10px 0;
		}
		
		h3 {
			font-family: 'Lora', serif;
			font-size: 1.857em;
			font-weight: 400;
			color: #545454;		
		}
		
		h4 {
			font-family: 'Lora', serif;
			font-size: 1.5em;
			font-weight: 400;
			color: #545454;		
		}

		h3 span {color:#545454; }
		
		p {font-size:1.142em; font-weight: 400; }
		p a {color:#545454; border-bottom:1px solid #545454; }

		p a:hover {
			text-decoration:none;
			color:#545454;
			border-bottom:1px solid #545454; 
		}
		
		.logo .about-logo {
			margin: 1em 0;
		}

		.logo .about-logo img {
			display: block;
			margin: 0 auto; /* Centers the secondary logo */
		}

		.subtext {
			display: block;
			font-size: 0.928em;
			line-height: 1.42857143;
			color: #777;
			font-style: italic;
			padding: 0 0 0 15px;
		}
		
		a.decoration {text-decoration: none; }
		.strong {font-weight: 600; }
		.glyphicon {color:#545454; }		
		.hr-line {border-bottom: 1px solid #eee; }
		.f13 {font-size: 0.928em; }
		.f14 {font-size: 1em; }
		.f15 {font-size: 1.071em; }
		.f16 {font-size: 1.142em; }
		.f18 {font-size: 1.285em; }
		.padT10 {padding-top: 10px; }
		.padT15 {padding-top: 15px; }
		.padT20 {padding-top: 20px; }
		
		.padB20 {padding-top: 20px; }

		.thumbnail {background-color: #fff; border: 1px solid #e3e3e3; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05); box-shadow: inset 0 1px 1px rgba(0,0,0,.05);}
		.btn {letter-spacing: 1px; }
		.btn2 {padding: 8px 15px; font-size: 18px; }

		.btn-orange {
			color: #fff;
			background-color: #ff7000;
			border-color: #dd5200;
		}
		.btn-blue {
			color: #fff;
			background-color: #01b1ec;
			border-color: #0091ca;
		}
		.btn-purple {
			color: #fff;
			background-color: #9b297e;
			border-color: #7b006a;
		}
		.btn-yellow {
			color: #fff;
			background-color: #ffdb00;
			border-color: #dbbb00;
		}
		/* print button */
		.btn-success { 
			border-color: #398439;
		}

		.m0 {margin: 0px; }
		.spacer-10 {height: 10px; }
		.spacer-15 {height: 15px; }
		.spacer-20 {height: 20px; }
		.spacer-25 {height: 25px; }
		
		footer {
			background-color: #545454;
			color: #fff;
			padding: 20px 20px 10px 20px;
			letter-spacing: 1px;
			margin-top: auto; /* Ensures footer stays at the bottom when content is short */
		}

		footer p {
			color: #fff;
			font-size: 1em;
		}

		footer a {
			color: #fff;
		}

		footer a:hover {
			color: #333;
		}
 
	@media (min-width:992px) {
		#intro article{
			padding:3em 0 0;
			margin:0;
		}
	}
	
	#intro article {
		margin:0 auto;
		max-width:786px;
	}
	
	#intro article figure {
		margin:0 auto;
		max-width:180px;
	}
	
	#intro article figure img {
		width:100%;
	}
	
	#intro article h3 { 
	 text-align:center;
	 padding:.5em 0;
	}
	
	#intro article p {
		text-align:center;
	}
	
	@media (min-width:992px) {
		#aboutme article{
			padding:6em 0 0;
			margin:0;
		}
	}
	
	#aboutme article {
		margin:0 auto;
		max-width:786px;
	}
	
	#aboutme article figure {
		margin:0 auto;
		max-width:180px;
	}
	
	#aboutme article figure img {
		width:100%;
	}
	
	#aboutme article h3 { 
	 text-align:center;
	 padding:.5em 0;
	}
	
	#aboutme article p {
		text-align:left;
	}
	
	@media (min-width:992px) {
		#experience article{
			padding:0;
			margin:0 0 6em;
		}
	}
	
	#experience article {
		margin:0 auto;
		max-width:786px;
	}
	
	#experience article figure {
		margin:0 auto;
		max-width:150px;
	}
	
	#experience article figure img {
		width:100%;
	}
	
	#experience article h3 { 
	 text-align:center;
	 padding:.5em 0;
	}
	
	#experience article p {
		text-align:center;
	}
	
	
	@media (min-width:992px) {
		#abilities article{
			padding:3em 0 0;
			margin:0 0 6em;
		}
	}
	
	#abilities article {
		margin:0 auto;
		max-width:786px;
	}
	
	
	#abilities article h3 { 
	 text-align:center;
	 padding:.5em 0;
	}
	
	#abilities article p {
		text-align:center;
	}

	
	@media (min-width:992px) {
		#skills article{
			padding:1em 0 0;
			margin:0 0 6em;
		}
	}
	
	#skills article {
		margin:0 auto;
		max-width:786px;
	}
	
	#skills article h3 { 
	 text-align:center;
	 padding:.5em 0;
	}
	
	#skills article p {
		text-align:center;
	}
	
	ul.no-bullets { list-style-type: none; margin: 0px; padding: 0px; }
	ul > li { min-height: 35px; padding: 6px 0px; text-align: center; font-size:1em; font-weight: 400;}
	ul > li:hover { background: #f2f2f2; }
	ul > li .ability-title { display: inline-block; width: 100%; }

	article header {background:0 0; }
	article header h2 {color:#545454;text-align:center;font-size:3em;font-weight:400; }
	
	#what-i-do {
		z-index:980;
		position:relative;
		background:#fff;
		padding:0;
	}

@-webkit-keyframes bubble-rotate{0%{background-position:0 0}16.6%{background-position:-77px 0}33%{background-position:-77px 0}49%{background-position:-154px 0}65%{background-position:-154px 0}81%{background-position:-231px 0}100%{background-position:-231px 0}}
@-moz-keyframes bubble-rotate{0%{background-position:0 0}16.6%{background-position:-77px 0}33%{background-position:-77px 0}49%{background-position:-154px 0}65%{background-position:-154px 0}81%{background-position:-231px 0}100%{background-position:-231px 0}}
@keyframes bubble-rotate{0%{background-position:0 0}16.6%{background-position:-77px 0}33%{background-position:-77px 0}49%{background-position:-154px 0}65%{background-position:-154px 0}81%{background-position:-231px 0}100%{background-position:-231px 0}}
@-webkit-keyframes bubble-rotate-inverse{0%{background-position:0 0}16.6%{background-position:77px 0}33%{background-position:77px 0}49%{background-position:154px 0}65%{background-position:154px 0}81%{background-position:231px 0}100%{background-position:231px 0}}
@-moz-keyframes bubble-rotate-inverse{0%{background-position:0 0}16.6%{background-position:77px 0}33%{background-position:77px 0}49%{background-position:154px 0}65%{background-position:154px 0}81%{background-position:231px 0}100%{background-position:231px 0}}
@keyframes bubble-rotate-inverse{0%{background-position:0 0}16.6%{background-position:77px 0}33%{background-position:77px 0}49%{background-position:154px 0}65%{background-position:154px 0}81%{background-position:231px 0}100%{background-position:231px 0}}
@-webkit-keyframes bubble-rotate-vert{0%{background-position:0 0}5%{background-position:0 -77px}35%{background-position:0 -77px}40%{background-position:0 -154px}68%{background-position:0 -154px}73%{background-position:0 -231px}100%{background-position:0 -231px}}
@-moz-keyframes bubble-rotate-vert{0%{background-position:0 0}5%{background-position:0 -77px}35%{background-position:0 -77px}40%{background-position:0 -154px}68%{background-position:0 -154px}73%{background-position:0 -231px}100%{background-position:0 -231px}}
@keyframes bubble-rotate-vert{0%{background-position:0 0}5%{background-position:0 -77px}35%{background-position:0 -77px}40%{background-position:0 -154px}68%{background-position:0 -154px}73%{background-position:0 -231px}100%{background-position:0 -231px}}
@-webkit-keyframes bubble-rotate-vert-down{0%{background-position:0 0}5%{background-position:0 77px}35%{background-position:0 77px}40%{background-position:0 154px}68%{background-position:0 154px}73%{background-position:0 231px}100%{background-position:0 231px}}
@-moz-keyframes bubble-rotate-vert-down{0%{background-position:0 0}5%{background-position:0 77px}35%{background-position:0 77px}40%{background-position:0 154px}68%{background-position:0 154px}73%{background-position:0 231px}100%{background-position:0 231px}}
@keyframes bubble-rotate-vert-down{0%{background-position:0 0}5%{background-position:0 77px}35%{background-position:0 77px}40%{background-position:0 154px}68%{background-position:0 154px}73%{background-position:0 231px}100%{background-position:0 231px}}


@-webkit-keyframes bubble-rotate-vert-down-2{0%{background-position:0 0}10%{background-position:0 77px}35%{background-position:0 77px}40%{background-position:0 154px}68%{background-position:0 154px}73%{background-position:0 231px}82%{background-position:0 308px}}100%{background-position:0 308px}}
@-moz-keyframes bubble-rotate-vert-down-2{0%{background-position:0 0}10%{background-position:0 77px}35%{background-position:0 77px}40%{background-position:0 154px}68%{background-position:0 154px}73%{background-position:0 231px}82%{background-position:0 308px}100%{background-position:0 308px}}
@keyframes bubble-rotate-vert-down-2{0%{background-position:0 0}10%{background-position:0 77px}35%{background-position:0 77px}40%{background-position:0 154px}68%{background-position:0 154px}73%{background-position:0 231px}82%{background-position:0 308px}100%{background-position:0 308px}}
@keyframes bubble-rotate-vert-down-2{0%{background-position:0 0}10%{background-position:0 77px}35%{background-position:0 77px}40%{background-position:0 154px}68%{background-position:0 154px}73%{background-position:0 231px}82%{background-position:0 308px}100%{background-position:0 308px}}
 
 @media (min-width:992px) { 
	#what-i-do	{
		padding:3em 0;
	}
 }
 
 #what-i-do #design {
	 margin:1em 0;
	 text-align:center;
	}
	
	@media (min-width:992px) {
		#what-i-do #design {
			text-align:left;
			margin:3em 0 6em;
		}
	}
	
	#what-i-do #develop {
		margin:1em 0;
		text-align:center;
	}
	
	@media (min-width:992px) {
		#what-i-do #develop {
			text-align:left;
			margin:3em 0;
		}
	}
	
	 #what-i-do #test {
	 margin:1em 0;
	 text-align:center;
	}
	
	@media (min-width:992px) {
		#what-i-do #test {
			text-align:left;
			margin:3em 0 6em;
		}
	}
	
	#what-i-do #tech {
		margin:1em 0;
		text-align:center;
	}
	
	@media (min-width:992px) {
		#what-i-do #tech {
			text-align:left;
			margin:3em 0;
		}
	}
	
	#what-i-do .dev-info {
		margin:0 auto;
		background-image:url(../images/line-bg.png);
		background-position:center center;
		background-repeat:repeat-x;
		position:relative;
		min-height:155px;
		}
 
 @media (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5),(min-resolution:1.5dppx) {
	 #what-i-do .dev-info {
		 background-image:url(../images/line-bg.png);
		 background-size:3px auto;
		}
	}
	
	#what-i-do .dev-info img {
		float:right;
		width:100%;
		max-width:180px;
		margin-right:-20px;
	}
	
	@media (min-width:992px) {
		#what-i-do .dev-info img {
			margin-right:-30px;
			margin-top:-10px;
		}
	}
	
	#what-i-do .design-info {
		margin:0 auto;
		background-image:url(../images/line-bg.png);
		background-position:center center;
		background-repeat:repeat-x;
		position:relative;
	}
 
 @media (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5),(min-resolution:1.5dppx) {
	 #what-i-do .design-info {
		 background-image:url(../images/line-bg.png);
		 background-size:3px auto;
		}
	}
	
	#what-i-do .design-info figure {
		max-width:150px;
	}
	
	#what-i-do .design-info figure img {
		width:100%;
		margin-left: -3px;
	}
	
	#what-i-do .test-info {
		margin:0 auto;
		background-image:url(../images/line-bg.png);
		background-position:center center;
		background-repeat:repeat-x;
		position:relative;
		min-height:155px;
		}
 
 @media (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5),(min-resolution:1.5dppx) {
	 #what-i-do .test-info {
		 background-image:url(../images/line-bg.png);
		 background-size:3px auto;
		}
	}
	
	#what-i-do .test-info img {
		float:right;
		width:100%;
		max-width:180px;
		margin-right:-20px;
	}
	
	@media (min-width:992px) {
		#what-i-do .test-info img {
			margin-right:-30px;
			margin-top:-10px;
		}
	}
	
	#what-i-do .tech-info {
		margin:0 auto;
		background-image:url(../images/line-bg.png);
		background-position:center center;
		background-repeat:repeat-x;
		position:relative;
	}
 
 @media (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5),(min-resolution:1.5dppx) {
	 #what-i-do .tech-info {
		 background-image:url(../images/line-bg.png);
		 background-size:3px auto;
		}
	}
	
	#what-i-do .tech-info figure {
		max-width:150px;
	}
	
	#what-i-do .tech-info figure img {
		width:100%;
	}
	
		
	#what-i-do h3 {
		padding:0 0 1em;
		margin:0;
	}
	
	#what-i-do .bubble {
		background:#e9e8e7;
		width:77px;
		height:77px;
		/*border: 1px solid #b80000;*/
		-webkit-border-radius:60px;
		-moz-border-radius:60px;
		border-radius:60px;
		position:absolute;
		overflow:hidden;
		top:2.6em;
	}
	
		#what-i-do .bubble .bubbling-design-icons-vert {
		-webkit-animation-name:bubble-rotate-vert;
		-moz-animation-name:bubble-rotate-vert;
		animation-name:bubble-rotate-vert;
		border-radius:60px;
		-webkit-border-radius:60px;
		-moz-border-radius:60px;
		width:77px;
		height:77px;
		-webkit-animation-duration:12s;
		-webkit-animation-delay:2s;
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-timing-function:cubic-bezier(1,0,0,1);
		-moz-animation-duration:12s;
		-moz-animation-delay:2s;
		-moz-animation-iteration-count:infinite;
		-moz-animation-timing-function:cubic-bezier(1,0,0,1);
		animation-duration:12s;
		animation-delay:2s;
		animation-iteration-count:infinite;
		animation-timing-function:cubic-bezier(1,0,0,1);
		background-image:url(../images/design-icons-vert-2.png);
	}
 
 @media (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5),(min-resolution:1.5dppx) {
	 #what-i-do .bubble .bubbling-design-icons-vert {
		 background-image:url(../images/design-icons-vert-2.png);
		 background-size:77px 231px;
		}
	}
	
	#what-i-do .bubble .bubbling-dev-icons-vert {
		-webkit-animation-name:bubble-rotate-vert-down-2;
		-moz-animation-name:bubble-rotate-vert-down-2;
		animation-name:bubble-rotate-vert-down-2;
		border-radius:60px;
		-webkit-border-radius:60px;
		-moz-border-radius:60px;
		width:77px;
		height:77px;
		-webkit-animation-duration:10s;
		-webkit-animation-delay:2s;
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-timing-function:cubic-bezier(1,0,0,1);	
		-moz-animation-duration:10s;
		-moz-animation-delay:2s;
		-moz-animation-iteration-count:infinite;
		-moz-animation-timing-function:cubic-bezier(1,0,0,1);
		animation-duration:10s;
		animation-delay:2s;
		animation-iteration-count:infinite;
		animation-timing-function:cubic-bezier(1,0,0,1);		
		background-image:url(../images/dev-icons-vert-2.png);
	}
 
 @media (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5),(min-resolution:1.5dppx) {
	 #what-i-do .bubble .bubbling-dev-icons-vert {
		 background-image:url(../images/dev-icons-vert-2.png);
		 background-size:77px 308px;
		}
	}
	
	#what-i-do .bubble .bubbling-tech-icons-vert {
		-webkit-animation-name:bubble-rotate-vert;
		-moz-animation-name:bubble-rotate-vert;
		animation-name:bubble-rotate-vert;
		border-radius:60px;
		-webkit-border-radius:60px;
		-moz-border-radius:60px;
		width:77px;
		height:77px;
		-webkit-animation-duration:13s;
		-webkit-animation-delay:2s;
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-timing-function:cubic-bezier(1,0,0,1);
		-moz-animation-duration:13s;
		-moz-animation-delay:2s;
		-moz-animation-iteration-count:infinite;
		-moz-animation-timing-function:cubic-bezier(1,0,0,1);
		animation-duration:13s;
		animation-delay:2s;
		animation-iteration-count:infinite;
		animation-timing-function:cubic-bezier(1,0,0,1);
		background-image:url(../images/tech-icons-vert-2.png);
	}
 
 @media (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5),(min-resolution:1.5dppx) {
	 #what-i-do .bubble .bubbling-tech-icons-vert {
		 background-image:url(../images/tech-icons-vert-2.png);
		 background-size:77px 231px;
		}
	}
	
	#what-i-do .bubble .bubbling-test-icons-vert {
		-webkit-animation-name:bubble-rotate-vert;
		-moz-animation-name:bubble-rotate-vert;
		animation-name:bubble-rotate-vert;
		border-radius:60px;
		-webkit-border-radius:60px;
		-moz-border-radius:60px;
		width:77px;
		height:77px;
		-webkit-animation-duration:15s;
		-webkit-animation-delay:1s;
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-timing-function:cubic-bezier(1,0,0,1);
		-moz-animation-duration:15s;
		-moz-animation-delay:1s;
		-moz-animation-iteration-count:infinite;
		-moz-animation-timing-function:cubic-bezier(1,0,0,1);
		animation-duration:15s;
		animation-delay:1s;
		animation-iteration-count:infinite;
		animation-timing-function:cubic-bezier(1,0,0,1);
		background-image:url(../images/test-icons-vert-2.png);
	}
 
 @media (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5),(min-resolution:1.5dppx) {
	 #what-i-do .bubble .bubbling-test-icons-vert {
		 background-image:url(../images/test-icons-vert-2.png);
		 background-size:77px 231px;
		}
	}
	
	#what-i-do .right {right:0; }
	#what-i-do .left {left:0; }
	#what-i-do .deets {padding:2em 0; }
	
	@media (min-width:992px) {
		#what-i-do .deets {
			padding:0 0 0 2em;
		}
	}
	
	/* RESPONSIVE ADJUSTMENTS FOR SMALL SCREENS */
		@media (max-width: 600px) {
			header {
				flex-direction: column;
				align-items: flex-start;
			}
			
			nav ul {
				flex-direction: column;
				margin-top: 1em;
				align-items: flex-start;
			}
			
			nav li {
				margin-left: 0;
				margin-bottom: 0.5em;
			}
		}

		@media (max-width: 414px) {	
			.text-center-mob {
				text-align:center !important;
			}
		}