article {

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	font: inherit;

	vertical-align: baseline;

}



article {

display:block;	

}









			

			

			

/* start css only parallax */			



  /* Parallax base styles

  --------------------------------------------- */



  /* added this in for article tags */

  #content article {

	  z-index: 4;

	position: relative;

	max-width: 940px;

	padding: 0 10px;

	margin: 0 auto;

	line-height: 1.7;

	  

	  

	  

	  

		width: 300px;

		}

		#background ,

		#coding,

		#resume,

		#contact {

			padding-top: 105px;

			}

		#background {

			position: absolute;

			top: 0px;

			}

		#coding {

			position: absolute;

			top: 1090px;

			}

		#resume {

			position: absolute;

			top: 2180px;

			}

			#content h1 {

				margin: 0 0 25px 0;

				font-size: 60px;

				font-family: Georgia, serif;

				font-weight: normal;

				line-height: 65px;

				}

			#content p {

				color: green;

				}

		#contact {

			position: absolute;

			top: 3270px;

			}

			

	/* added the above for article tags */

  

  

  

  

  

  

  

  .parallax {

    height: 500px; /* fallback for older browsers */

    height: 100vh;

    overflow-x: hidden;

    overflow-y: auto;

    -webkit-perspective: 300px;

    perspective: 300px;

  }



  .parallax__group {

    position: relative;

    height: 500px; /* fallback for older browsers */

    height: 100vh;

    -webkit-transform-style: preserve-3d;

    transform-style: preserve-3d;

  }



  .parallax__layer {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

  }



  .parallax__layer--fore {

    -webkit-transform: translateZ(90px) scale(.7);

    transform: translateZ(90px) scale(.7);

    z-index: 1;

  }



  .parallax__layer--base {

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

    z-index: 4;

  }



  .parallax__layer--back {

    -webkit-transform: translateZ(-300px) scale(2);

    transform: translateZ(-300px) scale(2);

    z-index: 3;

  }



  .parallax__layer--deep {

    -webkit-transform: translateZ(-600px) scale(3);

    transform: translateZ(-600px) scale(3);

    z-index: 2;

  }





  /* Debugger styles - used to show the effect

  --------------------------------------------- */



  .debug {

    position: fixed;

    top: 0;

    left: .5em;

    z-index: 999;

   /* background: rgba(0,0,0,.85); */

	

	background: white;

    color: #fff;

    padding: .5em;

    border-radius: 0 0 5px 5px;

  }

  .debug-on .parallax__group {

    -webkit-transform: translate3d(800px, 0, -800px) rotateY(30deg);

    transform: translate3d(700px, 0, -800px) rotateY(30deg);

 }

  .debug-on .parallax__layer {

    box-shadow: 0 0 0 2px #000;

    opacity: 0.9;

  }

  .parallax__group {

    -webkit-transition: -webkit-transform 0.5s;

    transition: transform 0.5s;

  }

  





  /* demo styles

  --------------------------------------------- */



  body, html {

    overflow: hidden;

  }



  body {

    font: 100% / 1.5 Arial;

	/*background: rgb(16,47,32);	*/

	background: white;

  }

  

    a:link {

    text-decoration: none;

	color:white;

}



a:visited {

    text-decoration: none;

	color:silver;

}



a:hover {

    text-decoration: none;

}



a:active {

    text-decoration: none;

}



  * {

    margin:0;

    padding:0;

  }



  .parallax {

    font-size: 200%;

  }



   /* centre the content in the parallax layers */

  .title {

    text-align: center;

    position: absolute;

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

  }







  /* style the groups

  --------------------------------------------- */



  

   /***********  group1 controls *************/

  #group1 {

    z-index: 5; /* slide over group 2 */

  }

  #group1 .parallax__layer--base {

    /* background: rgb(102,204,102); */

	/*background: rgb(16,47,32);*/ /* circuit board green background color*/

	background:transparent url("../img/curtains.jpg");

  }



  /***********  group2 controls *************/

  

  #group2 {

    z-index: 3; /* slide under groups 1 and 3 */

  }

 

  

  #background {

	 text-align: center;

    position: absolute;

    left: 58%;

    top: 20%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

  }

  #group2 .parallax__layer--back {

    /* background: rgb(123,210,102); */

	/*background: rgb(16,47,32);*/  /* circuit board green background color*/

	/*background:transparent url("../img/board.jpg");*/

	background: blue;

  }

  

  /***********  group3 controls *************/



  #group3 {

    z-index: 3; /* slide over group 2 and 4 */

  }

    #coding {

		text-align: center;

		

		

		top: 20%;

		-webkit-transform: translate(-50%, -50%);

		transform: translate(-50%, -50%);

		color:white;

		margin-top: 100px;

		margin-left:405px;

		margin-right: 400px;

		text-decoration:none;

		

		

	}

	

  #codingpic {

	   position: absolute;

		left: 75%;   

  }

  

   #codingpic {

	   position: absolute;

		left: 65%;   

  }

  

  #group3 .parallax__layer--base {

    /* background: rgb(153,216,101); */

	/*background: rgb(16,47,32);*/  /* circuit board green background color*/

	/*background:transparent url("../img/board.jpg");*/

	

	background: black;	

  }



  

   /***********  group4 controls *************/

  #group4 {

    z-index: 2; /* slide under group 3 and 5 */

  }

  #resume {

		text-decoration:none;

		text-align: center;

		position: absolute;

		left: 51%;

		top: 25%;

		-webkit-transform: translate(-50%, -50%);

		transform: translate(-50%, -50%);

		color:black;

	}

  #group4 .parallax__layer--deep {

    /* background: rgb(184,223,101); */

	/*background: rgb(16,47,32);*/  /* circuit board green background color*/

	background:transparent url("../img/board.jpg");

  }



  

   /***********  group5 controls *************/

  #group5 {

    z-index: 3; /* slide over group 4 and 6 */

  }

  #contact {

		text-align: center;

		position: absolute;

		left: 50%;

		top: 25%;

		-webkit-transform: translate(-50%, -50%);

		transform: translate(-50%, -50%);

		color:black;

	}

  #group5 .parallax__layer--base {

    /* background: rgb(214,229,100); */

	/*background: rgb(16,47,32);*/  /* circuit board green background color*/

	background:transparent url("../img/board.jpg");

  }



  

   /***********  group6 controls *************/

  #group6 {

    z-index: 2; /* slide under group 5 and 7 */

  }

  #group6 .parallax__layer--back {

    /*background: rgb(245,235,100); */

	/*background: rgb(16,47,32);*/  /* circuit board green background color*/

	background:transparent url("../img/board.jpg");

  }



  

   /***********  group7 controls *************/

  #group7 {

    z-index: 3; /* slide over group 7 */

  }

  #group7 .parallax__layer--base {

    /*background: rgb(255,241,100); */

	/*background: rgb(16,47,32);*/  /* circuit board green background color*/

	background:transparent url("../img/board.jpg");

  }





  /* misc

  --------------------------------------------- */

  .site__info {

    position: absolute;

    z-index:100;

    bottom: 1vh;

    top: auto;

    font-size:80%;

    text-align:center;

    width: 100%;

	color:white;

  }