/* #slide-about *******************************/

#slide-about {
 	background: var(--color-light);

	.hero-lottie {
	  background-color: #f6f6f6;
		display: none;
	  inset: auto auto 0% 0%;
	  object-fit: cover;
	  position: absolute;
	  top: 40px;
	  width: 90%;
	  z-index: 1;
	}

 	.panel {
		color: var(--color-text);
		gap: 40px;
	  opacity: 1;
		position: relative;
		text-align: center;
		top: 0;
		z-index: 2;

		.main {
			order: 2;
			width: 100%;
		}

		.graphic {
			order: 1;
			width: 90%;

      .photo {
				background-color: #fff;
   			border: 20px solid #fff;
    		border-radius: 5px;
	    	box-shadow: 0 5px 5px rgba(0,0,0,0.3);
      	transform: rotate(4deg);
      	width: 100%;

	 			img {
 					height: auto;
	      	width: 100%;
				}
  		}
		}
	}
}

@keyframes fadeIn {

  from {
    opacity: 0;
  } to {
    opacity: 1;
  }
}

@media (min-width: 1000px) {

	#slide-about {
		position: sticky;
		top: 75px;

		.hero-lottie {
		  bottom: 0;
			display: block;
			top: auto;
		  width: calc(90vh * 1.77);
		}

	 	.panel {
		  animation: fadeIn 2s ease-in 2s forwards;
			opacity: 0;

			.main {
	      max-width: 1200px;
			}
		}
	}
}

/* .team *******************************/

.team {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-bottom: 60px;
	width: 100%;

	.member {
		align-items: center;
		display: flex;
		flex-direction: column;
		gap: 20px;

		> .headshot {
			display: none;

			img {
				border-radius: 100px;
				height: auto;
				width: 140px;
			}
		}

		.bio {

			.profile {
				align-items: center;
				display: flex;
				flex-direction: column;
				gap: 10px;
				margin-bottom: 5px;

				.headshot {

					img {
						border-radius: 100px;
						height: auto;
						width: 140px;
					}
				}

				h3 {
					font-size: 1.3rem;
					font-weight: 900;
					text-transform: none;

					.title {
						font-weight: 300;
					}

					a {
						position: relative;
					}

					img {
						height: 30px;
						position: relative;
						top: -2px;
						width: auto;
					}
				}
			}
		}
	}
}

@media (min-width: 1000px) {

	.team {
		flex-direction: row;

		.member {
			border: 0;
			padding: 0;
			width: calc(100% / 3);

			.headshot {
				display: block;
			}

			.bio {

				.profile {

					.headshot {
						display: none;
					}
				}
			}
		}
	}
}