main div {position: relative; display: block;}

/* -------------------------------------------------------------------------------------------- */
/* Stats Hero ---------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
.stats {
	display: block;
	width: 90%;
	margin: 0 auto;
	text-align: center;
}
.stat {
	display: inline-block;
	vertical-align: top;
	width: 33.3333%;
	max-width: 180px;
}
.stat-number {
	display: block;
	width: 100%;
	height: auto;
	overflow: hidden;
}
.stat h2 {
	position: relative;
	display: block;
	margin-bottom: 8px;
	color: #fff;
	font-size: 4em;
	transform: translateY(100px);
	-webkit-transition: transform 2s ease;
	-moz-transition: transform 2s ease;
	-o-transition: transform 2s ease;
	transition: transform 2s ease;
}
.stat h2.reveal {transform: translateY(0);}
.line-break {
	position: relative;
	width: 100%;
	height: 1px;
	background: #fff;
}
.stat p {
	margin: 8px 0 0;
	color: #fff;
	font-weight: 600;
	line-height: 1.35em;
}
.company-wrapper {
	width: 70%;
	max-width: 600px;
}


/* Mission Statement ---------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
h1.mission-statement,
h2.mission-statement {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 4px solid #000700;
	box-shadow: 8px 8px 0 rgba(0,7,0,0.25);
	font-size: 1.65em;
	text-transform: uppercase;
}
h1.mission-statement span,
h2.mission-statement span {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 16px 16px 18px;
	border-bottom: 1px solid #000700;
	text-align: center;
}
h1.mission-statement span.first-part,
h2.mission-statement span.first-part {
	width: 100%;
	padding: 14px 16px 20px;
	background: #000700;
	color: #fff;
	font-size: 2em;
	line-height: 1em;
	text-shadow: 4px 4px 0 rgba(255,255,255,0.25);
	white-space: nowrap;
}
h1.mission-statement span.long-part,
h2.mission-statement span.long-part {
	flex-grow: 1;
}

.bg-black h1.mission-statement,
.bg-black h2.mission-statement {
	background: #000700;
	border-color: #fff;
	box-shadow: 8px 8px 0 rgba(255,255,255,0.25);
}
.bg-black h1.mission-statement span,
.bg-black h2.mission-statement span {
	border-color: #fff;
}
.bg-black h1.mission-statement span.first-part,
.bg-black h2.mission-statement span.first-part {
	background: #fff;
	color: #000700;
	text-shadow: 4px 4px 0 rgba(0,7,0,0.25);
}

@media screen and (min-width: 560px) {
	h1.mission-statement,
	h2.mission-statement {
		flex-direction: row;
		flex-wrap: wrap;
	}
	h1.mission-statement span,
	h2.mission-statement span {
		width: 24%;
		border-bottom: 0;
	}
	h1.mission-statement span.middle-part:after,
	h2.mission-statement span.middle-part:after {
		content: '';
		position: absolute;
		top: 0;
		left: 100%;
		width: 16px; 
		height: 100%;
		background: #000700;
	}
	.bg-black h1.mission-statement span.middle-part:after,
	.bg-black h2.mission-statement span.middle-part:after {
		background: #fff;
	}
	h1.mission-statement span.middle-part:after,
	h2.mission-statement span.middle-part:after {
		transform: translate3d(-50%,0,0);
		clip-path: polygon(0 0, 1px 0, 100% 50%, 1px 100%, 0 100% ,calc(100% - 1px) 50%);
	}
	h1.mission-statement span.long-part,
	h2.mission-statement span.long-part {
		flex-grow: 1;
	}
}

@media screen and (min-width: 980px) {
	h1.mission-statement,
	h2.mission-statement {
		flex-wrap: nowrap;
	}
	h1.mission-statement span.first-part,
	h2.mission-statement span.first-part {
		width: auto;
	}
	h1.mission-statement span.first-part:after,
	h2.mission-statement span.first-part:after {
		content: '';
		position: absolute;
		top: 0;
		left: 100%;
		width: 16px; 
		height: 100%;
		background: #000700;
		clip-path: polygon(0 0, 100% 50%, 0 100%);
	}
	.bg-black h1.mission-statement span.first-part:after,
	.bg-black h2.mission-statement span.first-part:after {
		background: #fff;
	}
}


/* mission paragraph ---------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
#vision h2 {
	text-transform: initial;
	text-align: center;
	line-height: 1.2em;
}
#vision h2 span {position: relative; z-index: 2;}
.vision-ignite svg {
	fill: #c10230;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: -1;
	transform: translate3d(-50%,-50%,0);
}
.vision-world svg {
	fill: #c10230;
	position: absolute;
	right: -16px;
	top: 0;
	z-index: -1;
}
.vision-solution svg {
	fill: #c10230;
	position: absolute;
	left: 50%;
	bottom: -8px;
	z-index: -1;
	transform: translate3d(-50%,0,0);
}


/* values section ---------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
h2.values-title {font-size: 10vw;}
.values {position: relative; width: 100%;}
.values-icon {
	position: relative; 
	z-index: 2; 
	width: 100%;
	max-width: 200px;
	height: auto;
	aspect-ratio: 1/1;
	margin: 0 auto;
}
.values-icon svg {fill: #000700; width: 100%; height: 100%;}
.bg-black .values-icon svg {fill: #fff;}
.values-icon svg .static {fill: #c10230;}
.values-text {position: relative; z-index: 2; text-align: center;}
.values-text h3 {
	position: relative;
	display: block;
	margin: 0 0 12px;
	padding: 0;
	transform: translateX(0);
	background: none;
}

@media screen and (min-width: 560px) {
	h2.values-title {font-size: 6vw;}
	.values-icons {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		column-gap: 24px;
	}
	.values {width: calc(50% - 12px);}
}

@media screen and (min-width: 767px) {
	.values-icons {align-items: flex-start;}
}

@media screen and (min-width: 900px) {
	h2.values-title {color: #f4f3ee; font-size: 80px;}
	.bg-black h2.values-title {color: #505050;}
}

@media screen and (min-width: 1080px) {
	.values {width: calc(25% - 18px);}
}


/* -------------------------------------------------------------------------------------------- */
/* Our Team ---------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
.department-title {
	position: relative;
	top: 0;
	left: 50%;
	z-index: 1;
	display: inline-block;
	margin: 0 auto;
	padding: 8px 21px 10px;
	background: #c10230;
	transform: translate(-50%,0);
	font-size: 2em;
	line-height: 0.85em;
	color: #fff;
	text-align: center;
	white-space: nowrap;
}
.tag-team {z-index: 2;}
.team-member .team-line {border-bottom: 1px solid #000700;}
.team-member img {
	display: block;
	width: 80%;
	height: auto;
	margin: 0 auto;
}
.team-member-name {
	margin: 0;
	padding: 8px 0;
	text-align: center;
	transform: translateX(0);
}
.team-member-info {
	width: 100%;
	margin: 0;
	padding: 0 12px;
	line-height: 1.35em;
	text-align: center;
}
.team-member-info p {margin-bottom: 5px; font-style: italic;}


@media screen and (min-width: 340px) {
	.department-title {
		padding: 8px 22px 12px;
		font-size: 3em;
		line-height: 0.85em;
	}
	.tag-team {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
	}
	.team-member {width: 50%;}
	.team-member img {width: 42vw; margin: 0 0 0 4vw;}
	.team-member-info {width: 50vw;}
	.team-member:last-child {flex-grow: 1;} 
}

@media screen and (min-width: 560px) {
	.department-title {
		position: absolute;
		border: 1px solid #000700;
		background: none;
		transform: translate(-50%,-50%);
		color: #000700;
	}
	.team-member {width: 33.3333%;}
	.team-member-info {width: 33.3333vw;}
	.team-member img {width: 28.3333vw; margin-left: 2.5vw;}
}

@media screen and (min-width: 900px) {
	.team-member {width: 25%;}
	.team-member-info {width: 25vw;}
	.team-member img {width: 21vw; margin-left: 2vw;}
}

@media screen and (min-width: 1080px) {
	.department-title {
		padding: 8px 36px 14px;
		font-size: 4em;
		line-height: 0.85em;
	}
}

@media screen and (min-width: 1280px) {
	.team-department {margin-top: 0;}
	.team-member {width: 20%;}
	.team-member-info {width: 20vw;}
	.team-member img {width: 17vw; margin-left: 1.5vw;}
	
	.team-member:nth-child(5n+1) {flex-grow: 1;}
	.team-member:nth-child(5n+1) img {margin-left: auto; margin-right: 1.5vw;}
	.team-member:first-child .team-member-info {margin-left: auto;}
	.team-member:nth-child(5n+1) .team-member-info {margin-left: auto;}
	
	.team-member:last-child img {margin-left: 1.5vw; margin-right: auto;}
	.team-member:last-child .team-member-info {margin: 0;}
	.team-member:nth-child(5n+1):last-child img {margin-left: auto;}
	.team-member:nth-child(5n+1):last-child .team-member-info {margin-left: auto; margin-right: auto;}
}


@media screen and (min-width: 1600px) {
	.team-member {width: 16.6667%;}
	.team-member-info {width: 16.6667vw;}
	.team-member img {width: 14.6667vw; margin-left: 1vw;}	
	
	.team-member:nth-child(5n+1) {flex-grow: initial;}
	.team-member:nth-child(6n+1) {flex-grow: 1;}
	.team-member:nth-child(5n+1) img {margin-left: 1vw; margin-right: 0;}
	.team-member:nth-child(6n+1) img {margin-left: auto; margin-right: 1vw;}
	.team-member:nth-child(5n+1) .team-member-info {margin-left: 0;}
	.team-member:nth-child(6n+1) .team-member-info {margin-left: auto;}
	
	.team-member:last-child img {margin-left: 1vw;}
	.team-member:nth-child(5n+1):last-child img {margin-left: 1vw;}
	.team-member:nth-child(6n+1):last-child img {margin-left: auto; margin-right: auto;}
	.team-member:nth-child(5n+1):last-child .team-member-info {margin-left: 0; margin-right: 0;}
	.team-member:nth-child(6n+1):last-child .team-member-info {margin-left: auto; margin-right: auto;}
}

@media screen and (min-width: 1920px) {
	.team-member {width: 14.2857%;}
	.team-member-info {width: 14.2857vw;}
	.team-member img {width: 12.2857vw;}
	
	.team-member:nth-child(6n+1) {flex-grow: initial;}
	.team-member:nth-child(7n+1) {flex-grow: 1;}
	.team-member:nth-child(6n+1) img {margin-left: 1vw; margin-right: 0;}
	.team-member:nth-child(7n+1) img {margin-left: auto; margin-right: 1vw;}
	.team-member:nth-child(6n+1) .team-member-info {margin-left: 0;}
	.team-member:nth-child(7n+1) .team-member-info {margin-left: auto;}
	
	.team-member:nth-child(6n+1):last-child img {margin-left: 1vw;}
	.team-member:nth-child(7n+1):last-child img {margin-left: auto; margin-right: auto;}
	.team-member:nth-child(6n+1):last-child .team-member-info {margin-left: 0; margin-right: 0;}
	.team-member:nth-child(7n+1):last-child .team-member-info {margin-left: auto; margin-right: auto;}
}




/* -------------------------------------------------------------------------------------------- */
/* Thunderstruck Sales and Marketing banner ---------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
.tsm-banner {
	position: relative;
	background: #f8f7ff;
}
.tsm-image {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
	z-index: 1;
	height: 100%;
	width: 100%;
}
.tsm-image img {
	position: absolute;
	left: 50%;
	display: block;
	height: 100%;
	width: auto;
	margin-left: -980px;
}
.tsm-info {
	position: relative;
	left: 50%;
	z-index: 2;
	width: 45%;
	max-width: 600px;
}
.tsm-text {margin: 0 0 20px;}
.tsm-text h4 {margin: 0 0 12px;}
.tsm-text img {margin-left: -8px;}

@media screen and (max-width: 1030px) {
	/* Company page ---------------------------------------------- */
	.tsm-banner {padding-bottom: 0;}
	.tsm-image {
		position: relative;
		height: 500px;
	}
	.tsm-image img {
		position: relative;
		margin-left: -660px;
	}
	.tsm-info {
		left: 0;
		width: 90%;
		max-width: 700px;
		margin: 0 auto;
	}
	.tsm-button-wrap {
		position: absolute;
		bottom: -440px;
		width: 100%;
		text-align: center;
	}
}

@media screen and (max-width: 750px) {
	/* Company page ---------------------------------------------- */
	.tsm-image {height: 400px;}
	.tsm-image img {margin-left: -520px;}
	.tsm-button-wrap {bottom: -340px;}
}