/* Header styling */

@media screen and (min-device-width: 300px) {
	.social-icons {
		height: 6%;
		color: #ffffff;
	}

	.social-icons:hover {
		-webkit-transform: scale(1.3);
		-ms-transform: scale(1.3);
		transform: scale(1.3);
	}

	.fa-angle-double-down {
		padding-top: 5%;
		text-decoration: none;
		color: #ffffff;
		-moz-animation: bounce 2s infinite;
		-webkit-animation: bounce 2s infinite;
		animation: bounce 2s infinite;
	}

	@keyframes bounce {
		0%, 20%, 50%, 80%, 100% {
			transform: translateY(0);
		}
		40% {
			transform: translateY(-30px);
		}
		60% {
			transform: translateY(-15px);
		}
	}

	#header {
		background: url('../img/header-bkg2.jpg');
		background-position: center 20%;
		background-size: cover;
		width: 100%;
		height: 50vh;
		font-family: "Raleway";
		color: rgb(255, 255, 255);
		text-transform: uppercase;
		line-height: 0.833;
		text-align: center;
		font-size: 90px;
	}

	#header h1 {
		font-size: 1.5em;
		padding-top: 15%;
	}

	#header h3 {
		font-size: 0.5em;
	}

	/* Navigation styling */
	#nav {
		margin-left: 21%
	}

	nav ul li {
		float: left;
		list-style-type: none;
		margin-right: 10%;
	}

	.Rectangle_148 {
	  left: 0px;
	  top: 900px;
	  z-index: 807;
	}

	nav {
		background-color: rgb(255, 255, 255);
		box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.1);
		width: 1770px;
		height: 90px;
		text-align: center;
		display: inline;
		font-size: 15px;
		font-weight: bold;
		font-family: "Raleway";
		padding-top: 44px;
		border-bottom: 0px 0px 1px 0px solid grey;
	}

	nav a {
		display: inline-block;
		color: rgb(44, 62, 80);
		text-decoration: none;
		font-size: 1.5em;
	}

	/* Hidden fixed navigation */

	#fixedbar {
		display: none;
		position: fixed;
		top: -30px;
		width: 100%;
		height: 70px;
		background: rgba(0,0,0,0.65);
	}

	#fixednav {
		display: block;
		width: 710px;
		margin: 0 auto;
		margin-left: 25%;
		padding: 0px 25px;
	}

	#fixednav li a {
		display: block;
		float: left;
		font-size: 1.75em;
		font-weight: bold;
		color: rgb(255, 255, 255);
		text-decoration: none;
		line-height: 70px;
		padding: 0px 8px;
		margin-right: 10%;
		-webkit-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		transition: all 0.2s linear;
	}

	#fixednav li a:hover {
		color: #fff;
		background: rgba(0,0,0,0.3);
	}


	/* About Section */

	#about {
		padding-top: 10%;
		border-bottom: 1px solid rgb(44, 62, 80);
		font-family: "Raleway";
		color: rgb(44, 62, 80);
		text-align: center;
	}

	#about h3  {
	  font-size: 60px;
	  color: rgb(44, 62, 80);
	  font-weight: bold;
	  text-transform: uppercase;
	  line-height: 0.433;
	}

	#about a {
		text-decoration: none;
	}

	#about p {
	padding: 0 20% 5% 20%;
	text-align: left;

	}
	/*
	#worker {
		height: 150px;
		width: 150px;

	}*/
	/* Resume styling */

	.resume-image {
		width: 100%;
	}

	/* Portfolio section */

	.project-image {
		height: 300px;
	  width: 60%;
	  margin: 20px 400px;
	}

	.fa-github-alt,
	.fa-external-link-square {
		font-size: 2em;
	}

	.github-repo {
		display: inline;
		margin-right: 2%;
	}

	.github-repo,
	.fa-external-link-square {
		color: #1ABC9C;
	}

	#portfolio {
		padding-top: 5%;
		text-align: center;
		font-family: "Raleway";
		color: rgb(44, 62, 80);
	}

	#portfolio h3 {
	  font-size: 60px;
	  font-family: "Raleway";
	  color: rgb(44, 62, 80);
	  font-weight: bold;
	  text-transform: uppercase;
	  line-height: 0.433;
	}

	#portfolio img {
		height: 300px;
	  width:40%;
	  margin: 0 auto;
	}
	#portfolio a:hover {
		box-shadow: inset 0 0 0 25px #ffffff;
	}

	#portfolio p {
		padding: 0 200px;
		padding-bottom: 5%;
	}

	/* Contact section styling */
	#contact {
		padding-top: 5%;
		border-top: 1px solid rgb(44, 62, 80);
		text-align: center;
	}

	#contact h3 {
		font-size: 60px;
		font-family: "Raleway";
		color: rgb(44, 62, 80);
		font-weight: bold;
		text-transform: uppercase;
		line-height: 0.433;
	}

	.contact-icons {
		padding: 10% 0;
		margin: 0 13%;
		text-align: left;
	}

	.fa-download {
		font-size: 3.5em;
	}

	.fa-text-resume {
		font-family: "Raleway";
		font-size: 1.5em;
		font-weight: bold;
		color: rgb(44, 62, 80);
	}


	#contact-social {
		text-align: left;
	}

}

@media screen
and (min-device-width: 1000px) {
	#header {
			height: 100vh;
	}

	/* Navigation styling */

	#fixednav, #nav {
			margin-left: 23%;
		}

	nav ul li {
			float: left;
			list-style-type: none;
			margin-right: 15%;
		}

}