inspec/www/source/stylesheets/_homepage.scss

//Hero Banner - Home Page

header {
	height: 500px;
}
#container {
	height: 500px;
	overflow: hidden;
	position: relative;
}
.h-top {
	position: absolute;
	z-index: 1;
	img {
		&:first-of-type {
			height: 500px;
			position: relative;
		}
		&:nth-child(3) {
			position: absolute;
			height: 250px;
			top: 120px;
			z-index: -1;
		}
	}
	h1 {
		position: absolute;
		z-index: 10;
		top: 75%;
	}
}

// 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);
      }
  }