@media only screen and (min-width: 760px){ /* PC's */
	body{
		
		text-align: center;
		background: url(images/asfalt.png) repeat;/*; /* url(images/pattern.png) repeat;99badd tar heel blue*/  /*333435 tentative grey*/

		/* height: 98vh; */
	}
	.home{
		height: 800px;
		width: 100%;

	}
	
	.about{
		height: 750px;
		background-color: white;
		margin-right: auto;
		margin-left: auto;
		padding-right: 15px;
		padding-left: 15px;
		padding-top: 40px;
		padding-bottom: 40px;
		width: 100%;
	}
	
	.skills{
		height: 435px;
		background-color: #0B0C10;
		margin-right: auto;
		margin-left: auto;
		padding-right: 15px;
		padding-left: 15px;
		padding-top: 40px;
		padding-bottom: 40px;
		width: 100%;
	}
	
	.projects{
		height: 1180px;
		background-color: white;
		margin-right: auto;
		margin-left: auto;
		padding-right: 15px;
		padding-left: 15px;
		padding-top: 40px;
		padding-bottom: 40px;
		width: 100%;
	}

	.navbar-nav{
		padding-top: 20px;
        margin: 0px auto auto 680px;
		/* margin: 0px auto; */

	}
	
	.navbar{
		background: url(images/asfalt.png) repeat;/*; /* url(images/pattern.png) repeat;99badd tar heel blue*/  /*333435 tentative grey*/

	}

	.custom-toggler.navbar-toggler {
		border-color: #FFF;
	}
	
	.custom-toggler .navbar-toggler-icon {
	  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
	}
	
	.read_more{
		position: absolute;
		top: 80%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		display: block;
		text-align: center;
	}
	#arrow1
	{
		position: relative;
		top: 0;
		left: 0;
		-webkit-transition: opacity 0.2s;
	}
	#arrow2
	{
		position: absolute;
		top:50px;
		left: 43px;
		-webkit-transition: opacity 0.2s;
	}
	
	.read_more:hover #arrow1{
		opacity: 0;	
	}
	
	.read_more:hover #arrow2{
		opacity: 1 !important;	
	}
	
	.read_more:hover #read_more_p{
		border: none;
		underline: none;
	}

	.center{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		display: block;
		text-align: center;
	}
	h1{ 
		letter-spacing: 25px;
		font-size: 2.5rem;
		color: white;
		font-weight: 500;
		line-height: 1.1;
		display: block;
	}

	h3{
		font-size: 1.75rem;
		letter-spacing: 2px;
		font-weight: 500;
		line-height: 1.1;
		color: white;
	}

	#main_title:hover{
		color: #ff2b3b;
	}

	#menu{
		background: url(images/asfalt.png) repeat;
		overflow: hidden;
		margin: 20px 160px 20px 160px; /*20px top margin, automatic right margin, 20px bottom margin, automatic left margin. */

	}


	#menu a{
		float: right;
		display: inline;
		list-style: none;
		font: 16px Helvetica;
		margin-top: 20px;
		padding: 14px 25px;
		text-decoration: none;
		color: #6B6E70;
		-webkit-transition: background 0.1s, color 0.3s;
	}

	#menu a:hover{
		background: #86C232; /* green */
		color: white;
	}

	a:link, a:visited {
		display: block; /* must have "diplay: block;" in order for padding to take effect on inline elements */
		border:  1px #79a4d2;
		font: bold 15px Consolas;
		color: black;
	}

	#about_title, #projects_title, #skills_title, #contact_title{
		letter-spacing: 12px;
		font-size: 2.1rem;
		color: black;
		font-weight: 500;
		line-height: 1.1;
		display: block;
		text-align: left;
		padding-left: 10.0rem;
		padding-top: 2.0rem;
		padding-bottom: 20px;
	}

	#about_section, #projects_section{
		padding-left: 140px;
		padding-right: 140px;
		font-weight: 500;
		font-size: 1em;
		line-height: 1.8;
		letter-spacing: 1.2px;
		text-align: left;
		color: black;
	}
	
	#skills_title{
		letter-spacing: 12px;
		font-size: 2.1rem;
		color: white;
		font-weight: 500;
		line-height: 1.1;
		display: block;
		text-align: left;
		padding-left: 10.0rem;
		padding-top: 2.0rem;
		padding-bottom: 2.0rem;
	}
	
	#skills_subtitle{
		font-size: 1.25rem;
		letter-spacing: 2px;
		font-weight: 500;
		line-height: 1.5;
		color: white;
		padding-left: 20px;
		padding-bottom: 2rem;
	}

	#skills_section{
		padding-left: 140px;
		padding-right: 140px;
		font-weight: 500;
		font-size: 0.95rem;
		line-height: 1.4;
		letter-spacing: 1.2px;
		text-align: left;
		color: white;
	}
	
	#contact_section{
		padding-left: 140px;
		padding-right: 140px;
		font-weight: 500;
		font-size: 1.2em;
		line-height: 1.8;
		letter-spacing: 1.2px;
		text-align: left;
		color: black;
	}
	
	#info{
		padding: 0px;
		padding-left: 4rem;
		font: bold;
	}
	
	p {
		padding: 20px;
		font: normal Deja vu Sans Mono;
		/* color: white; */
		/* color: #6B6E70; */
	}

	.projectCard {
		height: 160px;
	}

	#contact_info{
		font: bold 25px Courier; 
		line-height: 1.4;
		color: #61892F;
	}
	
	#contact_p{
		color: #6B6E70;
		font: normal 20px Deja vu Sans Mono;
	}
	
	.page-footer{
		background-color: #19181A; /* OR 222629 */
	}
	
	#footer_p{
		letter-spacing: 5px;
		font-size: 1.1rem;
		color: white;
		font-weight: 500;
		line-height: 1.1;
		display: block;
		text-align: center;
		margin-bottom: 0px;
		padding-top: 5rem;
	}
		
	.social-icons {
	  text-align: center;
	  padding: 0px;
	  margin: 0px;
	  padding-bottom: 4rem;
	}  

	.social-icons li {
	  display:inline-block;
	  list-style-type:none;
	  -webkit-user-select:none;
	  -moz-user-select:none;
	}
	 
	.social-icons li a {
	  border-bottom: none;
	 }
	  
	.social-icons li img {
	  width: 45px;
	  height: 45px;
	  margin-right: 5px;
	}
}

@media only screen and (max-width: 759px){ /* Wide Phones */
	body{
		
		text-align: center;
		background: url(images/asfalt.png) repeat;/*; /* url(images/pattern.png) repeat;99badd tar heel blue*/  /*333435 tentative grey*/

		/* height: 98vh; */
	}
	.home{
		height: 800px;
		width: 100%;

	}
	
	.about{
		height: 1020px;
		background-color: white;
		margin-right: auto;
		margin-left: auto;
		padding-right: 15px;
		padding-left: 15px;
		padding-top: 40px;
		padding-bottom: 40px;
		width: 100%;
	}
	
	.skills{
		height: 880px;
		background-color: #0B0C10;
		margin-right: auto;
		margin-left: auto;
		padding-right: 15px;
		padding-left: 15px;
		padding-top: 40px;
		padding-bottom: 40px;
		width: 100%;
	}
	
	.projects{
		height: 3150px;
		background-color: white;
		margin-right: auto;
		margin-left: auto;
		padding-right: 15px;
		padding-left: 15px;
		padding-top: 40px;
		padding-bottom: 40px;
		width: 100%;
	}
	.projectCard{
		height: 160px !important;
		font-size: 14px !important;
	}
	.navbar-nav{
        margin: 0px 22px;
		
	}
	
	.navbar{
		background: url(images/asfalt.png) repeat;/*; /* url(images/pattern.png) repeat;99badd tar heel blue*/  /*333435 tentative grey*/

	}

	.custom-toggler.navbar-toggler {
		border-color: #FFF;
		margin: 0px 0px 0px 0px;
	}
	
	.custom-toggler .navbar-toggler-icon {
	  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
	}
	
	.read_more{
		position: absolute;
		top: 90%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		display: block;
		text-align: center;
	}
	
	#arrow1{
		position: relative;
		top: 0;
		left: 0;
	}
	
	#arrow2{
		position: absolute;
		top:50px;
		left: 43px;
	}

	.center{
		position: absolute;
		top: 55%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		display: block;
		text-align: center;
	}
	h1{ 
		letter-spacing: 20px;
		padding-bottom: 10px;
		font-size: 2.25rem !important;
		color: white;
		font-weight: 500;
		line-height: 1.1;
		display: block;
	}

	h3{
		font-size: 1.25rem !important;
		letter-spacing: 2px;
		font-weight: 500;
		line-height: 1.5 !important;
		color: white;
		text-align: left;
	}

	#main_title:hover{
		color: #ff2b3b;
	}

	#menu{
		background: url(images/asfalt.png) repeat;
		overflow: hidden;
		margin: 20px 160px 20px 160px; /*20px top margin, automatic right margin, 20px bottom margin, automatic left margin. */

	}


	#menu a{
		float: right;
		display: inline;
		list-style: none;
		font: 20px Helvetica;
		padding-bottom: 16px;
		text-decoration: none;
		color: #6B6E70;
		-webkit-transition: background 0.1s, color 0.3s;
	}

	#menu a:hover{
		background: #86C232; /* green */
		color: white;
	}

	a:link, a:visited {
		display: block; /* must have "diplay: block;" in order for padding to take effect on inline elements */
		border:  1px #79a4d2;
		font: bold 15px Consolas;
		color: black;
	}

	#my_picture{
		width:22rem !important;
		height:17rem !important;
	}
	
	#about_title, #projects_title, #skills_title, #contact_title{
		letter-spacing: 12px;
		font-size: 2.1rem;
		color: black;
		font-weight: 500;
		line-height: 1.5;
		display: block;
		text-align: left;
		padding-left: 10px;
		padding-top: 2.0rem;
		padding-bottom: 20px;
	}

	#about_section, #projects_section{
		font-weight: 500;
		font-size: 1.25em;
		line-height: 1.4;
		letter-spacing: 1.2px;
		text-align: left;
		color: black;
		
	}

	#skills_title{
		letter-spacing: 12px;
		font-size: 2.1rem;
		color: white;
		font-weight: 500;
		line-height: 1.1;
		display: block;
		text-align: left;
		padding-top: 2.0rem;
		padding-bottom: 2.0rem;
	}
	
	#skills_subtitle{
		font-size: 1.25rem;
		letter-spacing: 2px;
		font-weight: 500;
		line-height: 1.5;
		color: white;
		padding-left: 20px;
		padding-bottom: 0.5rem;
	}

	#skills_section{
		font-weight: 500;
		font-size: 0.95rem;
		line-height: 1.4;
		letter-spacing: 1.2px;
		text-align: left;
		color: white;
	}
	
	#contact_section{
		font-weight: 500;
		font-size: 1.2em;
		line-height: 1.8;
		letter-spacing: 1.2px;
		text-align: left;
		color: black;
	}
	
	#info{
		padding: 0px;
		padding-left: 2rem;
		font: bold;
	}

	p {
		padding: 20px;
		font: normal Deja vu Sans Mono;
		
	}

	#contact_info{
		font: bold Courier; 
		line-height: 1.4 !important;
		color: #61892F;
		padding-top: 3rem;
		letter-spacing: 6px;
		padding-bottom: 10px;
		font-size: 2.25rem !important;
		font-weight: 250;
		display: block;
	}
	
	#contact_p{
		color: #6B6E70;
		font: normal 1.55rem Deja vu Sans Mono;
		padding: 0px;
		padding-bottom: 2rem;
	}
	
	.page-footer{
		background-color: #19181A; /* OR 222629 */
	}
	
	#footer_p{
		letter-spacing: 5px;
		font-size: 1.1rem;
		color: white;
		font-weight: 500;
		line-height: 1.1;
		display: block;
		text-align: center;
		margin-bottom: 0px;
		padding-top: 5rem;
	}
		
	.social-icons {
	  text-align: center;
	  padding: 0px;
	  margin: 0px;
	  padding-bottom: 4rem;
	}  

	.social-icons li {
	  display:inline-block;
	  list-style-type:none;
	  -webkit-user-select:none;
	  -moz-user-select:none;
	}
	 
	.social-icons li a {
	  border-bottom: none;
	 }
	  
	.social-icons li img {
	  width: 45px;
	  height: 45px;
	  margin-right: 5px;
	}
}

@media only screen and (max-width: 376px){ /* Mid-sized Phones (Galaxy S5)*/
	
	.projects{
		height: 3250px;
		background-color: white;
		margin-right: auto;
		margin-left: auto;
		padding-right: 15px;
		padding-left: 15px;
		padding-top: 40px;
		padding-bottom: 40px;
		width: 100%;
	}

	.projectCard {
		height: 80px;
	}
}

@media only screen and (max-width: 321px){ /* small phones (Iphone 5/5s) */
	
	.home{
		height: 600px;
		width: 100%;

	}
	
	.about{
		height: 1130px;
		background-color: white;
		margin-right: auto;
		margin-left: auto;
		padding-right: 15px;
		padding-left: 15px;
		padding-top: 40px;
		padding-bottom: 40px;
		width: 100%;
	}
	
	.skills{
		height: 960px;
		background-color: #0B0C10;
		margin-right: auto;
		margin-left: auto;
		padding-right: 15px;
		padding-left: 15px;
		padding-top: 40px;
		padding-bottom: 40px;
		width: 100%;
	}
	
	.projects{
		height: 3300px;
		background-color: white;
		margin-right: auto;
		margin-left: auto;
		padding-right: 15px;
		padding-left: 15px;
		padding-top: 40px;
		padding-bottom: 40px;
		width: 100%;
	}
	.projectCard {
		height: 160px;
	}
	
	#my_picture{
		width:18rem !important;
		height:14rem !important;
	}
}