/* trivy homepage */
.trivy_v1_homepage_wrap {
	position: relative;
 	z-index: 3;

	* {
		transition: all 0.2s ease !important;
	}

	

	.hero_wrap {
		background-color: $aq-trivy-dark;
		background-image: radial-gradient(1600px at 70% 120%, #031145 10%, $aq-trivy-dark 100%);
		min-height: 1050px;
		position: relative;
		z-index: 10;


		.homepage_background_image_wrap {
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			z-index: 1;
			pointer-events: none;


			.stars_wrap {
				position: absolute;
				left: 0px;
				top: 0px;
				width: 100%;
				height: 100%;
				z-index: 1;
				overflow: hidden;
				
				.stars_bg {
					position: absolute;
					width: 400vw;
					height: 400vh;
					top: 50%;
					left: 50%;
					margin-top: -200vh;
					margin-left: -200vw;
					animation: stars_ani 240s linear infinite;
					background-size: 240px;
					backface-visibility: visible;
					background-image:url(../images/homepage_hero_stars_02.svg);
					background-repeat: repeat;
					
				}


				@keyframes stars_ani {
					0% { transform: rotate(0deg); }
					100% { transform: rotate(360deg); }
				}

			} //stars_wrap

			.terrain_wrap {
				position: absolute;
				left: 0px;
				bottom: 0px;
				width: 100%;
				height: 680px;
				background-image:url(../images/homepage_hero_terrain_08.svg);
				background-repeat: no-repeat;
				background-position: center top;
				background-size: cover;
				z-index: 2;
			} // terrain_wrap


			.beams_wrap {
				position: absolute;
				left: 0px;
				bottom: 0px;
				width: 100%;
				height: 100%;
				z-index: 3;
				overflow: hidden;

				.beam {
					position: absolute;
					right: 200px;
					top: 270px;
					width: 3px;
					height: 350%;
					background: rgba(#3eabff,0.6);
					box-shadow: 0px 0px 55px 0px rgba(#3eabff,1);
					transform-origin: 0 0;
					animation: beam_ani 10s infinite;
					
					&.num2 {animation: beam_ani 11s infinite;}
					&.num3 {animation: beam_ani 12s infinite;}
					&.num4 {animation: beam_ani 13s infinite;}
				} //beam
							
				@keyframes beam_ani {
					0% { transform: rotate(75deg); }
					50% { transform: rotate(-15deg); }
					100% { transform: rotate(75deg); }
				}

				.sphere {
					z-index:999;
					position: absolute;
					top: 60px;
					right: 50px;
					width: 280px;
					height: 280px;
					background-image:url(../images/homepage_hero_orb_03.png);
					background-position: center center;
					background-repeat: no-repeat;
				}

			} //beams_wrap


			.person_wrap {
				position: absolute;
				left: 0px;
				bottom: 0px;
				width: 100%;
				height: 595px;
				background-image:url(../images/homepage_v1_hero_person_01.png);
				background-repeat: no-repeat;
				background-position: center bottom;
				z-index: 4;

			} // person_wrap				
			


		} //hero_background_image_wrap
	}



	.hero {

		
		.hero-body {
			padding: 80px 0px;
			// border: 1px solid red;

			.header_title_wrap {
				.header_title_content_wrap {

					width: 50%;
					position: relative;
					z-index: 3;

					.page_title {
						color: #ffffff;
						font-weight: $weight-bold;
						font-size: 48px; //3rem
						line-height: 1.3;
					}//page_title
			
					.page_subtitle {
						color: #ffffff;
						font-weight: $weight-normal;
						font-size: 24px; //1.5rem
						line-height: 1.3;
						margin-bottom: 30px;
					} //page_subtitle


					@media screen and (max-width: $widescreen), print {
						width: 70%;
					} //until widescreen

					@media screen and (max-width: $tablet), print { //769

						width: 100%;

						.page_title {
							font-size: 32px; //2rem
						}//page_title
			
						.page_subtitle {
							font-size: 18px; //1.125rem
						}//page_subtitle
			
					} //until tablet


				} //header_title_content_wrap

			} //header_title_wrap

			@media screen and (min-width: $tablet), print { //769
				padding: 48px 24px; //3rem 1.5rem
			}
		}

	} //hero





	// } //page-trivy_homepage




	/* homepage_community */
	.homepage_community_wrap {
	position: relative;
	background-color: $aq-trivy-dark;
	color: #ffffff;
	z-index: 5;
	padding-top: 60px;
	padding-bottom: 20px;


	.container.wide_container {
		max-width: 1640px;
		padding-left: 20px;
		padding-right: 20px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}


	.community_titles_column {
		width: 33.3333%;
		padding-right: 32px;

		@media screen and (max-width: $desktop), print {
			width: 41.6666666667%;
		} //until desktop

		@media screen and (max-width: $tablet), print {
			width: 100%;
		} //until tablet
	}

	.community_slider_column {
		width: 66.6666%;

		@media screen and (max-width: $desktop), print {
			width: 58.3333333333%;
		} //until desktop

		@media screen and (max-width: $tablet), print {
			width: 100%;
		} //until tablet
	}


	.community_title {
		color: $aq-neon-blue;
		font-size: 60px; //3.75rem
		font-weight: $weight-bold;
		margin-bottom: 24px; //1.5rem
		line-height: 1.2;
		

	}

	.community_subtitle  {
		color: #ffffff;
		font-size: 26px; //1.625rem
		margin-bottom: 24px; //1.5rem
		

	}

	.community_cta_wrap {

		.button {
			font-weight: $weight-bold;
			margin-right: 10px;
		}
		
	}

	.community_quotes_wrap {
		position: relative;
		

		.community_quotes {
			column-count: 3;
			column-gap: 20px;

			@media screen and (max-width: $widescreen), print { //1216
				column-count: 2;
			}

			@media screen and (max-width: $tablet), print { //769
				column-count: 1;
			}

			.quote_item_wrap {
				display: inline-block;
				margin: 0px 0px 20px 0px;
				width: 100%;
			}

			.quote_item {

				display: block;
				position: relative;
				color: #ffffff;
				border: 1px solid rgba($aq-neon-blue,0.2);
				background-color: rgba($aq-neon-blue,0.05);
				border-radius: 4px;
				padding: 25px;

				.quote_name {
					font-size: 16px; //1rem
					font-weight: $weight-semibold;
				}

				.quote_twitter_handle {
					opacity: 0.6;
					font-size: 13px; //0.8125rem
				}

				.quote_company {
					opacity: 0.6;
					font-size: 13px; //0.8125rem
				}

				.quote_text {
					font-size: 16px; //1rem
					font-weight: $weight-normal;
					line-height: 1.3;
				}

				.quote_avatar {
					display: block;
					position: absolute;
					top: 25px;
					left: 25px;
					width: 40px;
					height: 40px;
					border-radius: 50%;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: cover;

				}

				&.is_tweet {

					.quote_text {
						padding-top: 10px;
					}
					

					&.has_avatar {
						.quote_name,
						.quote_twitter_handle {
							padding-left: 50px;
						}
					} //has_avatar

				} //&is_tweet

				&.is_quote {

					.quote_text {
						position: relative;
						padding-top: 40px;
						padding-bottom: 10px;

						&:before {
							content: "";
							display: block;
							position: absolute;
							top: -10px;
							left: 0px;
							width: 56px;
							height: 42px;
							background-image: url(../images/community_quote.png);
							background-position: center center;
							background-repeat: no-repeat;
						}
					} //quote_text
					
				} //&is_quote

			} //quote_item

		}

	} //community_quotes_wrap

	@media screen and (max-width: $tablet), print { //tablet

		.community_title {
			font-size: 32px; //2rem
		}
		.community_subtitle {
			font-size: 18px; //1.125rem
		}

	} //until


	} //homepage_community_wrap

} //trivy_homepage_wrap