html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

body {
	-webkit-text-size-adjust: none;
}

/*mark {
	background-color: transparent;
	color: inherit;
}*/

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body.is-preload *, body.is-preload *:before, body.is-preload *:after {
		-moz-animation: none !important;
		-webkit-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
		-moz-transition: none !important;
		-webkit-transition: none !important;
		-ms-transition: none !important;
		transition: none !important;
	}

/* Type */

	
	p {
		/*text-align: justify;*/
		margin: 0 0 2.8rem 0;
	}

	pre {
		-webkit-overflow-scrolling: touch;
		font-family: "Courier New", monospace;
		font-size: 1.25rem;
		margin: 0 0 2.8em 0;
	}

		pre code {
			display: block;
			line-height: 2.45;
			padding: 1.4rem 2.1rem;
			overflow-x: auto;
		}

	hr {
		border: 0;
		border-bottom: solid 2px;
		border-bottom: 1px solid #ddd;
		margin: 4rem 0;
	}

		hr.major {
			margin: 7rem 0;
		}

	input, select, textarea {
		color: #212931;
	}

	a {
		color: #212931;
		-moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		
		text-decoration: none;
	}
		a:hover {
			color: #18bfef;
			color: #06d7cb;
		}

	hr {
		border-bottom-color: #eeeeee;
	}


/* Section/Article */

	section.special, article.special {
		text-align: center;
	}

	header {
		cursor: default;
	}

		header > .date {
			display: block;
			font-size: 0.8rem;
			height: 1;
			margin: 0 0 1rem 0;
			position: relative;
			font-size: 1.2rem;
			margin: 0 0 1.5rem 0;
		}

		header > h1 + p {
			font-size: 1.1rem;
			margin-top: -0.5rem;
			line-height: 2;
		}

		header > h2 + p {
			font-size: 1rem;
			font-size: 1.5rem;
			margin-top: -0.75rem;
		}

		header > h3 + p {
			font-size: 0.9rem;
			margin-top: -0.75rem;
		}

		header > h4 + p {
			font-size: 0.8rem;
			margin-top: -0.75rem;
		}

		header.major {
			margin: 0 0 4rem 0;
			text-align: center;
		}

			header.major > :last-child {
				margin-bottom: 0;
			}

			header.major > p {
				margin-top: 0;
				text-align: center;
			}

			header.major > .date {
				font-size: 1rem;
				font-size: 2.25rem;
				margin: 0 0 6rem 0;
			}

				header.major > .date:before, header.major > .date:after {
					content: '';
					display: block;
					position: absolute;
					top: 50%;
					width: calc(50% - 8.5rem);
					border-top: solid 2px;
				}

				header.major > .date:before {
					left: 0;
				}

				header.major > .date:after {
					right: 0;
				}

		@media screen and (max-width: 980px) {

			header br {
				display: none;
			}

		}

		@media screen and (max-width: 736px) {

			header.major {
				margin: 0 0 2rem 0;
			}

		}

	header.major .date:before, header.major .date:after {
		border-top-color: #eeeeee;
	}

/* Table */
	table th {
		letter-spacing: 0.075em;
		line-height: 1.5;
		padding: 0 0.75rem 0.75rem 0.75rem;
		text-align: left;
		text-transform: uppercase;
		color: #212931;
	}

	body.is-preload #wrapper.fade-in:before {
		opacity: 1;
	}


/* Main */

	#main,.skill_page{
		background-color: #ffffff;
		position: relative;
		margin: 0 auto;
		width: calc(100% - 31rem);
		max-width: 72rem;
		z-index: 5;
	}

		#main > * {
			padding: 4rem 4rem 2rem 4rem ;
			border-top: solid 2px #eeeeee;
			border-top: unset;
			margin: 0;
		}

			#main > *:first-child {
				border-top: 0;
			}

		#main > footer {
			text-align: center;
		}

		#main > .post {
			padding: 8rem 8rem 6rem 8rem ;
		}

			#main > .post header.major > .date {
				margin-top: -2.8rem;

			}

			#main > .post header.major > h1, #main > .post header.major h2 {
				font-size: 4rem;
				font-size: 6rem;
				line-height: 1.1;
				margin: 0 0 2rem 0;
			}

			#main > .post.featured {
				text-align: center;
			}

			@media screen and (max-width: 1280px) {

				#main > .post {
					padding: 6rem 4rem 4rem 4rem ;
				}

			}

			@media screen and (max-width: 736px) {

				#main > .post {
					padding: 4rem 2rem 2rem 2rem ;
				}

					#main > .post header.major > .date {
						margin-top: -1rem;
						margin-bottom: 2rem;
					}

					#main > .post header.major > h1, #main > .post header.major h2 {
						font-size: 2.5rem;
						line-height: 1.2;
						margin: 0 0 1.5rem 0;
					}

			}

		#main > .posts {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			-moz-align-items: -moz-stretch;
			-webkit-align-items: -webkit-stretch;
			-ms-align-items: -ms-stretch;
			align-items: stretch;
			text-align: center;
			width: 100%;
			padding: 0;
		}

			#main > .posts > * {
				-moz-flex-shrink: 1;
				-webkit-flex-shrink: 1;
				-ms-flex-shrink: 1;
				flex-shrink: 1;
				-moz-flex-grow: 0;
				-webkit-flex-grow: 0;
				-ms-flex-grow: 0;
				flex-grow: 0;
			}

			#main > .posts > * {
				width: 50%;
			}

			#main > .posts > * {
				padding: 4rem;
				width: 50%;
			}

			#main > .posts > article {
				border-color: #eeeeee;
				border-left-width: 2px;
				border-style: solid;
				border-top-width: 2px;
				text-align: center;
			}

				#main > .posts > article > :last-child {
					margin-bottom: 0;
				}

				#main > .posts > article:nth-child(2n - 1) {
					border-left-width: 0;
				}

				#main > .posts > article:nth-child(-n + 2) {
					border-top-width: 0;
				}

			@media screen and (max-width: 980px) {

				#main > .posts > * {
					width: 50%;
				}

				#main > .posts > * {
					padding: 2.5rem;
					width: 50%;
				}

			}

			@media screen and (max-width: 736px) {

				#main > .posts > * {
					width: 100%;
				}

				#main > .posts > * {
					padding: 2rem;
					width: 100%;
				}

				#main > .posts > article:nth-child(2n - 1) {
					border-left-width: 2px;
				}

				#main > .posts > article:nth-child(-n + 2) {
					border-top-width: 2px;
				}

				#main > .posts > article:nth-child(n) {
					border-left-width: 0;
				}

				#main > .posts > article:nth-child(-n + 1) {
					border-top-width: 0;
				}

				#main > .posts > article .image {
					max-width: 25rem;
					margin-left: auto;
					margin-right: auto;
				}

			}

		@media screen and (max-width: 736px) {

			#main > * {
				padding: 2rem 2rem 0.1rem 2rem ;
			}

		}

		@media screen and (max-width: 480px) {

			#main {
				width: 100%;
			}

		}


/* Footer */

	#copyright {
		position: relative;
		cursor: default;
		font-weight: 700;
		letter-spacing: 0.08em;
		line-height: 1.5;
		text-align: center;
		text-transform: uppercase;
		width: calc(100% - 6rem);
		max-width: 100rem;
		z-index: 1;
		font-size: 1.6rem;
		margin: 20rem auto 4rem auto;
	}

		#copyright a:hover {
			border-bottom-color: transparent;
			color: #18bfef !important;
			color: #06d7cb !important;
		}

		#copyright a {
			color: inherit;
			border-bottom-color: inherit;
			border-bottom: dotted 1px;
		}

		#copyright p{
			text-align: unset;
			margin: 0;
		}

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

			#copyright ul li {
				border-left: solid 2px;
				display: inline-block;
				line-height: 1;
				margin-left: 1.4rem;
				padding-left: 1.4rem;
				margin-bottom: 1.4rem;
			}
	
				#copyright ul li:first-child {
					border-left: 0;
					margin-left: 0;
					padding-left: 0;
				}

		@media screen and (max-width: 1280px) {

			#copyright {
				margin: 6rem auto;
			}

		}

		@media screen and (max-width: 480px) {

			#copyright ul li {
				border-left: 0;
				margin: 1.4rem 0 0 0;
				padding-left: 0;
				display: block;
			}

				#copyright ul li:first-child {
					margin-top: 0;
				}

		}

/* Nav Panel */

	#navPanelToggle {
		text-decoration: none;
		-moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		display: none;
		position: fixed;
		top: 0.75rem;
		right: 0.75rem;
		border: 0;
		color: #ffffff;
		font-family: "Source Sans Pro", Helvetica, sans-serif;
		font-size: 0.9rem;
		font-weight: 900;
		letter-spacing: 0.075em;
		padding: 0.375rem 1.25rem;
		text-transform: uppercase;
		z-index: 10001;
	}

		#navPanelToggle:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
		}

		#navPanelToggle:before {
			content: '\f0c9';
			margin-right: 0.5rem;
		}

		#navPanelToggle.alt {
			background-color: rgba(255, 255, 255, 0.875);
			box-shadow: 0 0.125rem 0.75rem 0 rgba(30, 37, 45, 0.25);
			color: #212931;
		}

			#navPanelToggle.alt:hover {
				background-color: #ffffff;
			}

		@media screen and (max-width: 980px) {

			#navPanelToggle {
				display: block;
			}

		}

		@media screen and (max-width: 736px) {

			#navPanelToggle {
				font-size: 0.8rem;
				padding: 0.25rem 1rem;
			}

		}

	#navPanel {
		-moz-transform: translateX(20rem);
		-webkit-transform: translateX(20rem);
		-ms-transform: translateX(20rem);
		transform: translateX(20rem);
		-moz-transition: -moz-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
		-webkit-transition: -webkit-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
		-ms-transition: -ms-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
		transition: transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
		display: none;
		-webkit-overflow-scrolling: touch;
		background: #ffffff;
		box-shadow: none;
		color: #212931;
		height: 100%;
		max-width: 80%;
		overflow-y: auto;
		padding: 3rem 2rem;
		position: fixed;
		right: 0;
		top: 0;
		visibility: hidden;
		width: 20rem;
		z-index: 10002;
	}

		#navPanel .links {
			list-style: none;
			padding-left: 0;
		}

			#navPanel .links li {
				border-top: solid 2px #eeeeee;
			}

				#navPanel .links li a {
					border-bottom: 0;
					display: block;
					font-family: "Source Sans Pro", Helvetica, sans-serif;
					font-size: 0.9rem;
					font-size: 0.9rem;
					font-weight: 900;
					letter-spacing: 0.075em;
					padding: 0.75rem 0;
					text-transform: uppercase;
				}

				#navPanel .links li:first-child {
					border-top: 0;
				}

		#navPanel .close {
			text-decoration: none;
			-moz-transition: color 0.2s ease-in-out;
			-webkit-transition: color 0.2s ease-in-out;
			-ms-transition: color 0.2s ease-in-out;
			transition: color 0.2s ease-in-out;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			border: 0;
			color: #909498;
			cursor: pointer;
			display: block;
			height: 3.25rem;
			line-height: 3.25rem;
			padding-right: 1.25rem;
			position: absolute;
			right: 0;
			text-align: right;
			top: 0;
			vertical-align: middle;
			width: 7rem;
		}

			#navPanel .close:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				font-family: FontAwesome;
				font-style: normal;
				font-weight: normal;
				text-transform: none !important;
			}

			#navPanel .close:before {
				content: '\f00d';
				font-size: 1.25rem;
			}

			#navPanel .close:hover {
				color: #212931;
			}

			@media screen and (max-width: 736px) {

				#navPanel .close {
					height: 4rem;
					line-height: 4rem;
				}

			}

		@media screen and (max-width: 980px) {

			#navPanel {
				display: block;
			}

		}

		@media screen and (max-width: 736px) {

			#navPanel {
				padding: 2.5rem 1.75rem;
			}

		}

	@media screen and (max-width: 980px) {

		body.is-navPanel-visible #wrapper {
			opacity: 0.5;
		}

		body.is-navPanel-visible #navPanel {
			-moz-transform: translateX(0);
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
			transform: translateX(0);
			box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.2);
			visibility: visible;
		}

	}