inspec/www/source/stylesheets/_homepage.scss

// Hero Banner - Home Page

header {
	width: auto;
	height: auto;
}

.short-bg {
	background-size: 100% 60%;
	background-repeat: no-repeat;
}

//number Box

.num-container {
	width: $percent_sm;
	height: $percent_sm;
	min-width: $percent_sm;
	background-image: url('/images/octagon.svg');
	background-size: cover;
	text-align: center;
}

.num-container h3 {
	line-height: $percent_sm;
}

//particle art

#particles-js, #particles-second, #particles-third { // Animated line particles
	position: absolute;
	width: 100%;
	max-width: 100%;
	height: 100%;
	top: 0;
	overflow: hidden;
	background-color: transparent;
}

img.diamond {
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 28px;
	right: 0;
	width: 14rem;
}

.octagons {
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.blue-grid {
	position: absolute;
	top: $percent_sm;
	right: 0;
	z-index: -1;
}


//icons and SUCH

.scrollToTop {
	width: $percent_sm;
	height: $percent_sm;
	border-radius: 50%;
	position: fixed;
	background-color: white;
	right: $percent_xs;
	bottom: $percent_xs;
	cursor: pointer;
	text-align: center;
}

img#scrollup {
	width: 20px;
	height: auto;
	margin-top: 11px;
}

img.icon-art {
	 height: 6rem;
}

img.icon-logos {
	height: 20px;
}

.copy {
	@extend %transition;
	width: 20px;
	height: auto;
	cursor: pointer;
	margin-right: $percent_xs;

	&:hover {
		-webkit-transform: scale(1.2);
		-ms-transform: scale(1.2);
		-moz-transform: scale(1.2);
		transform: scale(1.2);
	}
}

.text-focus { //for copied element
	@extend %transition;
	background-color: rgba(146, 107, 231, 0.2);
}

// Hero illustration for Community

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

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

img.ball:nth-child(2) {
	width: 55px;
	margin-top: 14rem;
	margin-left: 8.5rem;
}

img.ball:nth-child(3) {
	width: 75px;
	margin-top: 10rem;
  margin-left: 15rem;
}


// Animation for Home Page

.grid-animate { // Warping Grid Animation//
	-moz-animation: g-animate 8s linear infinite both;
	-webkit-animation: g-animate 8s linear infinite both;
	animation: g-animate 8s 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);
	}
}

@-moz-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);
	}
}

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

// Spin Animation Keyframes

@-moz-keyframes spin {
	from {
		-moz-transform: rotate(0deg);
	}

	to {
		-moz-transform: rotate(360deg);
	}
}

@-webkit-keyframes spin {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

//Rotate 90 degrees for nav-small

.turn {
-webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 transform: rotate(90deg);
}

//slide-left

.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}

.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

//slide-right

.slide-right {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(100px, 0px, 0px);
  -webkit-transform: translate3d(100px, 0px, 0px);
  -o-transform: translate(100px, 0px);
  -ms-transform: translate(100px, 0px);
  transform: translate3d(100px, 0px, 0px);
}

.slide-right.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

//slide-up

.slide-up {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(0px, 100px, 0px);
  -webkit-transform: translate3d(0px, 100px, 0px);
  -o-transform: translate(0px, 100px);
  -ms-transform: translate(0px, 100px);
  transform: translate3d(0px, 100px, 0px);
}

.slide-up.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

//slide-up-slow

.slide-up-slow {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.slide-up-slow.in-view {
	-moz-animation: scrollUp 10s normal forwards ease-in-out;
	-webkit-animation: scrollUp 10s normal forwards ease-in-out;
	animation: scrollUp 10s normal forwards ease-in-out;
}

@-moz-keyframes scrollUp {
	0% {
	 -moz-transform: translate3d(0px, 0px, 0px);
	}

	75% {
		-moz-transform: translate3d(0px, -100%, 0px);
	}

	100% {
	 -moz-transform: translate3d(0px, 0px, 0px);
	}
}

@-webkit-keyframes scrollUp {
	0% {
	 -webkit-transform: translate3d(0px, 0px, 0px);
	}

	75% {
		-webkit-transform: translate3d(0px, -100%, 0px);
	}

	100% {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
}

@keyframes scrollUp {
	0% {
	 transform: translate3d(0px, 0px, 0px);
	}

	75% {
		transform: translate3d(0px, -100%, 0px);
	}

	100% {
		transform: translate3d(0px, 0px, 0px);
	}
}

.animate-delay-10 {
	animation-delay: 1000ms;
	-webkit-animation-delay: 1000ms;
	-moz-animation-delay: 1000ms;
	-o-animation-delay: 1000ms;
}

.animate-delay-20 {
	animation-delay: 2000ms;
	-webkit-animation-delay: 2000ms;
	-moz-animation-delay: 2000ms;
	-o-animation-delay: 2000ms;
}

//slider

.hidden {
	display: none;
}

.slide-in {
	animation: slide-in 0.5s forwards;
	-webkit-animation: slide-in 0.5s forwards;
	-moz-animation: slide-in 0.5s forwards;
}

.slide-out {
	display: none;
}

@keyframes slide-in {
	0% { transform: translateX(100%); }
	100% { transform: translateX(0%); }
}

@-webkit-keyframes slide-in {
	0% {  -webkit-transform: translateX(100%); }
	100% { -webkit-transform: translateX(0%); }
}

@-moz-keyframes slide-in {
	0% { -moz-transform: translateX(100%); }
	100% { -moz-transform: translateX(0%); }
}