/********************************************
	Tag Resets
********************************************/

body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	margin: 0;
	padding: 0;
	border: 0;
}

/********************************************
	Normalize CSS
	http://necolas.github.com/normalize.css/
********************************************/

	html {
		height: 100%;
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		font-size: 100%;
		line-height: 1;
			-moz-text-size-adjust: 100%;
			-ms-text-size-adjust: 100%;
			-webkit-text-size-adjust: 100%;
	}

	body {
		min-height: 100%;
		font-size: 100%;
	}

	.box ul {
		list-style: none;
		padding: 0;
			}

	figure {
		background: #fff;
		-moz-box-shadow: 0 0 .325em .13em rgba( 0, 0, 0, .1 );
		-webkit-box-shadow: 0 0 .325em .13em rgba( 0, 0, 0, .1 );
		box-shadow: 0 0 .325em .13em rgba( 0, 0, 0, .1 );
		padding: 0; 
			}
	
	figure img {
		transition: .5s;
		}

	figure img:hover {
		transform: scale(1.1);

	}

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

	sub,
	sup {
		font-size: 75%;
		line-height: 0;
		position: relative;
		vertical-align: baseline;
	}

	sup {
		top: -0.5em;
	}

	sub {
		bottom: -0.25em;
	}

	pre {
		white-space: pre;
		white-space: pre-wrap;
		word-wrap: break-word;
	}

	b,
	strong {
		font-weight: bold;
	}

	abbr[title] {
		border-bottom: 1px dotted;
	}

	input,
	textarea,
	button,
	select {
		margin: 0;
		font-size: 100%;
		line-height: normal;
		vertical-align: baseline;
	}

	button,
	html input[type="button"],
	input[type="reset"],
	input[type="submit"] {
		cursor: pointer;
		-webkit-appearance: button;
	}

	input[type="checkbox"],
	input[type="radio"] {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}

	textarea {
		overflow: auto;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

			#nav,
			#masthead,
			#content,
			#colophon {
				margin: 0 3.3%;
	}
	/* Fluid Columns, Fixed Gutters */

	.wrapper {
		padding: 0 .75em;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;

	}
		p,
		#resume li
			{
			font-size: 1em;
			line-height: 1.45;
			margin: .75em 0; 
			
		}
		
		h1 {
			font-size: 2.625em;
			line-height: 1.45;
		}
		
		h2 { 
			font-size: 1.625em;
			line-height: 1.45;
			font-weight: 400;
			}
		
		h1, h2 {
    		text-shadow: 1px 2px 5px rgba(0, 0, 0, 1);
   			 }	

		h3 {
			font-size: 1.25em;
			line-height: 1.45;
			text-transform: uppercase;
		}
		
		h4 {
			font-size: 1.125em;
			line-height: 1.45;
			text-transform: uppercase;
			font-weight: 400;
			
		}
		
		h5 {
			font-size: 1.25em;
			line-height: 1.45;
			font-weight: 700;
		}
		
		h6  {
			
			font-size: .875em;
			line-height: 1.45;
			font-weight: 400;
			color: #686868;
			
		}
		#content article {
			padding-top: .5em;
			padding-bottom: 1.5em;
		}
		
		#portfolio h4 {
    		line-height: 1.75;
		}
		#container-header h2 {
	

			color: #FFFFFF;}
		
		#nav, #masthead, #content, #colophon  {
			margin: 0 18px;
		}
		
		#masthead  {
			color: #eee;
		}
		
		#container-nav  {
			background: #fff;
		}
			


		
		#container-content  {
			padding: 24px 0;
		}
		
		#container-footer  {
			padding: 32px 0;
			background: #3F3F3F;
			color: #eee;
			font-weight: 100;
		}
		

		.box  {
			padding: 14px;
		}
		
		img  { 
		max-width:100%;
		}
		
		.box h4 {
   		color: #999;
    	border-top: 4px;
    	border-bottom: 1px solid #eee;
    	margin-bottom: .75em; /* 3/4 of 1.3 */
    	
}
		
		#skills ul{
		list-style: disc;
}
		
		#skills li{
			line-height: 1.5em;
			margin: .75em 1em .75em 1em; 
}
		#currently ul{
		list-style: disc;
}
		
		#currently li{
			line-height: 1.3em;
			margin: .75em 1em .75em 1em; 
}
		#previously ul{
		list-style: disc;
}
		
		#previously li{
			line-height: 1.3em;
			margin: .75em 1em .75em 1em; 
}


		.wrapper {
   		padding: 0 .75em;
   		-webkit-box-sizing: border-box;
   		-moz-box-sizing: border-box;
    	box-sizing: border-box;
	}

		#masthead {
			width: 80%;
			padding-top: 1em;
		}
		
		#nav,
		#masthead,
		#content,
		#colophon {
			margin: 0 5%;
}

		/* Style all font awesome icons */
		.fab {
		  padding: 5px 10px 5px 0;
		  font-size: 2em;
		  width: 40px;
		  text-align: center;
		  text-decoration: none;
		}

		/* Add a hover effect if you want */
		.fab:hover {
		  opacity: 0.7;
		}

		/* Set a specific color for each brand */

		/* Facebook */
		.fa-instagram {
		  background: 0;
		  color: white;
		}

		/* Twitter */
		.fa-linkedin {
		  background: 0;
		  color: white;
			}

		.fa-facebook {
		  background: 0;
		  color: white;
				
			}
		

		section footer {
    		clear: both;
    		}
		
		form {
    		padding: 0 0 1.25em;
    		}
    
		form ul {
   		 list-style: none;
   		 padding: 1.25em 0 0;
   		 }
    
		form li {
    		padding: 0 0 .75em;
    		}
	
		legend {
			font-size: 1.25em; 
			line-height: 1.5;
			}
				    
		label {
   			display: block;
			font-size: 1em;
			line-height: 1.56;
    		padding: 0 0 .325em;
			}
		
		legend, label {      
			font-weight: 400;
			text-transform: uppercase;
			color: #fff;
			}
	
		input,
		textarea {
			display: block;
			width: 100%;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: 1em;
			line-height: 1.3;
			font-weight: 500;
			padding: .75em;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			}

/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */

		textarea {
			padding-bottom: 10%;
			overflow: auto; /* 1 */
			vertical-align: top; /* 2 */
			}

		.send {
			display: inline-block;
			max-width: 30em;
			font-size: 1em;
			line-height: 1;
			font-weight: 500;
			color: #fff;
			text-decoration: none;
			background: #2b2b2b;
			margin: .75em .25em;
			padding: .75em;
			border: 0;
			border-radius: 1.25em;
			text-shadow: 0 -1px 1px rgba(0, 0, 0, .65);
			}
    
		.send:hover {
			background: #6f6f6f;
			}

		.send:active,
		.send:focus {
			background: #555;
			}

	
		
		/* Float Clearing http://nicolasgallagher.com/micro-clearfix-hack */

		.group:after {
			content: " "; /* 1 */
			display: table; /* 2 */
			clear: both;
		}

		.group {
			*zoom: 1; /* 3 */
			}

		
		
/* ******************************************
    NAVIGATION
****************************************** */
	
		
		#nav {
			padding: .5em 0;
		}

		#nav h3 {
			float: left;
		}
		
		#nav ul {
			list-style: none;
			padding: 0;
			border-bottom: 1px solid #eee;
			margin: .5em 0 .25em;
		}

		#nav li {
		   border-top: 1px solid #eee;
		}

		#nav a {
		   display: block;
		   font-size: 1em;
		   color: #333;
		   text-decoration: none;
		   padding: 1em .50em; 
		}
		
		#nav a:hover {
		   background: #f8f8f8;
		}

		#nav nav {
			height: 0;
			overflow: hidden;
		}

		body { 
			-webkit-animation: bugfix infinite 1s; 
		}

		@-webkit-keyframes bugfix {
			from {padding: 0;} 
			to {padding: 0;} 
		}

		#nav input[type=checkbox] {
			position: absolute;
			top: -999em;
			left: -999em;
		}
		
		#nav label { 
			display: block;
			background:url("../img/greyburger.png") no-repeat right center;
			text-indent: -999em;
			cursor: pointer;
			-webkit-user-select: none;  /* Chrome all / Safari all */
			-moz-user-select: none;     /* Firefox all */
			-ms-user-select: none;      /* IE 10+ */
			user-select: none;
		}
		
		#nav input[type=checkbox]:checked ~ nav {
			height: auto;
			overflow: hidden;  
		}

		/* @media screen and (min-width: 720px) */
		@media screen and (min-width: 45em) {
			
		#nav {
			padding: 0;
		}
		
		#nav h3 {
			 margin: .5em 1em 0 0;
			
    }

		#nav label {
			display: none;
		}

		#nav nav {
			height: auto;
			overflow: visible;
		}
		
		#nav ul {
			border: 0;
			margin: 0;
			}
		
		#nav li {
			display: inline;
			border: 0;
		}
		
		#nav a {
			display: inline-block;
		}

			}


		/* @media screen and (min-width: 800px) */
		
@media screen and (min-width: 50em) {
		#nav a {
		   padding: 1em 1.25em; 
		}
}



/* ******************************************
    IE 7 and below, legacy browser style fixes
****************************************** */

.ie .wrapper {
    *behavior: url("http://absolute-path.com/js/boxsizing.htc");
}

/* Clearfix */

.group {
    *zoom: 1;
    }

/* ******************************************
	Web Fonts
****************************************** */




body {
	font-family: 'Poppins', sans-serif;
	
}

/* ******************************************
	Media Queries for screen less than 45em (720px)
****************************************** */

@media screen and (max-width: 45em) {
	#container-header {
			background: url("../img/keyboard-sm.png") no-repeat top center, linear-gradient(#595959,#FFFFFF);
			-webkit-background-size: cover;
		    -moz-background-size: cover;
		    background-size: cover;
			padding: 10% 0;
		}
	
		#portfolio figure  {
			max-width: 400px;
		}
	
		div.logo {
			height: 10em;
  			display: flex;
  			align-items: center;
  			justify-content: center;
			max-width: 25em;}
	
		div.logo img{
			padding: 2px 0px;
		}
		
		.fab {
		  padding: 5px 10px 5px 0;
		  font-size: 2em;
		  width: 30px;
		  text-align: center;
		  text-decoration: none;
		}
	}


		
/* ******************************************
	Media Queries for screen wider than 720px
****************************************** */
	
@media screen and (min-width: 45em) {

	    body {
	        font-size: 107.692307692308%;
	        }

		#portfolio article,
		#resume article {
			float: left;
			width: 33.333%;
		}
		#portfolio figure  {
			max-width: 400px;
		}
		
		.logo {
			float: left;
			width: 20%;	
			height: 10em;
  			display: flex;
  			align-items: center;
  			justify-content: center; }
		
		.logo img {
  			margin: 0; }
	
		#social {
			float: left;
			width: 30%;
		}
	
		#copyright box{
			float: right;
			width: 70%;
		
		}
			
		#copyright p{
			text-align: right;
		}
	
		#masthead  {
			max-width: 40em;
		}
		
		#nav,
        #masthead,
        #content,
        #colophon {
            margin: 0 5.5%;
        }
		
	
		
		.name, .email {
    		float: left;
   			width: 50%;
   			-webkit-box-sizing: border-box;
    		-moz-box-sizing: border-box;
    		box-sizing: border-box;
   		 }
    
		.name {
			padding-right: .75em;
			}

		.email {
			padding-left: .75em;
			}

		.send {
			width: 48.6%;
			}

		#container-header {
			background: url("../img/keyboard-lg.png") no-repeat top center, linear-gradient(#595959,#FFFFFF);
			padding: 10% 0;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			background-size: cover;
	}

	}

/* ***************************************************
	Media Queries for screen wider than 60 em (960px)
******************************************************/

		@media (min-width: 60em) {

		.name, .email {
			padding-right: 1.25em;
			padding-left: 0;
			clear: both;
			}

		.message textarea {
			width: 50%;
			}

		.send {
			width: 25%;
			margin-left: 50%;
			}

		}
	/* Media print query */
		
		
		@media print and (max-width: 8.5in) {

		#masthead {
			color:black;
		}
		
		#container-header {
			height: auto;
		}
		
		img {
			width:2in;
		}
		
		#portfolio	{
			float:left;
			width:45%;
		}
		
		#resume	{
			float:right;
			width:45%;
		}
		
		#container-footer	{
			clear:both;
		}
		
	}