inspec/www/source/stylesheets/_homepage.scss

//Hero Banner - Home Page

header {
	height: 500px;
}
#particles-js {
	width: 100%;
	height: 500px;
	overflow: hidden;
	position: absolute;
	background-color: transparent;
	margin-top: -500px;
	z-index: 20;
}

#particles-second{
	width:100%;
	max-width: 100%;
	overflow: hidden;
	position: absolute;
	background-color: transparent;
	height:100%;
	z-index: -1;
}


.h-top {
	height: 500px;
	img {
		&:first-of-type {
			height: 420px;
			position: absolute;
			top:90px;
			z-index: 10;
		}
		&:nth-child(3) {
			height: 250px;
			margin-top: 115px;
		}
	}
	h1 {
		z-index: 10;
		position: absolute;
		margin-top: 400px;
	}
}

//Hero Community

img.grid {
	margin-top: -80px;
	z-index: -1;
}

img.ball {
	position: absolute;
	width: 35px;
	margin-left: 240px;
  margin-top: 20px;
	-webkit-animation: spin 2s linear infinite both;
 animation: spin 2s linear infinite both;
 -moz-animation: spin 2s linear infinite both;
}

img.ball:nth-child(2){
width: 55px;
margin-left: 150px;
margin-top: 110px;
}

img.ball:nth-child(3){
	width: 75px;
	margin-left: 290px;
  margin-top: 130px;
}

//Tutorials

.tutorials {
	height: 200px;
	margin-top: 25px;
	align-items: center;
}

.tutorials .purp-shade {
	line-height: 200px;
	height: 200px;
}

.tutorials h2 {
	padding-top: 60px;
}

.tutorials #particles-second {
    width: 100%;
    overflow: hidden;
    position: absolute;
    background-color: transparent;
    max-height: 200px;
		z-index: initial;
	}
// Animation for Home Page

//Reflecting Diamond

.bright-animate{
  animation: brightness 6s infinite;
  -webkit-animation: brightness 6s infinite;
  -moz-animation: brightness 6s infinite;
}

@-webkit-keyframes brightness {
  0%, 100%  {
    -webkit-filter: brightness(none);
    filter: brightness(none);
  }
  50% {
     -webkit-filter: brightness(1.2);
    filter: brightness(1.2);
  }
}

@keyframes brightness {
  0%, 100%  {
    -moz-filter: brightness(none);
   filter: brightness(none);
   }
  50% {
     -moz-filter: brightness(1.2);
  filter: brightness(1.2);
  }
}

//Warping Grid Animation//

.grid-animate{
  -webkit-animation: g-animate 5s linear infinite both;
  animation: g-animate 5s linear infinite both;
  -moz-animation: g-animate 5s linear infinite both;
}
@-webkit-keyframes g-animate {
  25% { -webkit-transform: rotateZ(10deg) scale3d(0.7, 1, 1.2);
        transform: rotateZ(10deg) scale3d(0.7, 1, 1.2);
      }

  50% {-webkit-transform:  scale3d(1.2, 0.7, 1);
       transform:  scale3d(1.2, 0.7, 1);
     }

  75% {-webkit-transform: rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
        transform: rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
      }
  }
  @keyframes g-animate {
  25% { -moz-transform:  rotateZ(10deg) scale3d(0.7, 1, 1.2);
        transform:  rotateZ(10deg) scale3d(0.7, 1, 1.2);
      }

  50% {-moz-transform:   scale3d(1.2, 0.7, 1);
       transform:   scale3d(1.2, 0.7, 1);
     }

  75% {-moz-transform: rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
        transform: rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
      }
  }

	//Growing HR//


	hr.first {
		width: 0px;
	}

	.stretch{
	  -webkit-animation: grow 0.8s linear 1 both;
	  animation: grow 0.8s linear 1  both;
	  -moz-animation: grow 0.8s linear 1 both;
	}
	@-webkit-keyframes grow {
	  from { width:0px;}
	  to {width:150px;}
	}

	@keyframes grow {
			from { width:0px;}

			to {width:150px;}

	  }