/*-----Home - Services----- */

#about {
	position: relative;
	flex-direction: column;
	z-index: 1;
	background-color: var(--background-tertiary);
	color: var(--text-alt);
}

#about .title {
	background-color: var(--background-blue);
}

#about h1 {
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

#about h2 {
	font-size: 1.25rem;
	font-weight: 400;
}

#about span {
	font-size: 1.2rem;
	font-weight: 700;
}

#about a {
	font-size: 100%;
	font-weight: 550;
	padding: .625rem 1.25rem;
	color: var(--text-primary);
	background-color: var(--brand-accent);
	border-radius: 0.25rem;
	transition: color .8s ease-in-out 0s, background .8s ease-in-out 0s;
}

#about a:hover{
	color: var(--text-alt);
	background-color: var(--brand-primary);
	transition: color .8s ease-in-out 0s, background .8s ease-in-out 0s;
}

.box {
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--brand-primary);
	overflow: hidden;
}

#about .box div {
	margin: 7.5% 5%;
}

#about .box:nth-child(1) {
	background-image: url("/img/site/tornado.webp");
	color: var(--text-alt);
}

#about .box:nth-child(3) {
	background-image: url("/img/site/chart.webp");
	color: var(--text-alt);
}

@media only screen and (min-width : 600px) {

	#about .box div {
		margin: 17.5% 5%;
	}
}

@media only screen and (min-width: 1364px) {

	#about-boxes {
		justify-content: center;
	}

	.box {
		width: 33.33%;
	}
}

@media not all and (min-resolution:.001dpcm) {
    @media {
		#about .box:nth-child(1) {
			background-image: url("/img/site/tornado.jp2");
		}
		#about .box:nth-child(3) {
			background-image: url("/img/site/chart.jp2");
		}
    }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	#about .box:nth-child(1) {
		background-image: url("/img/site/tornado.jpg");
	}
	#about .box:nth-child(3) {
		background-image: url("/img/site/chart.jpg");
	}
}