.airsave-widget {
		--dark-green: #334023;
		
		display: flex;
		
		@media (max-width: 1050px) {
			flex-direction: column;
		}
		
		.airsave-hero-header {
			position: relative;
			background-image: url( '../images/airsave-wheat.png' );
			background-size: cover;
			width: 33%;
			
			.ips-logo {
				width: 80px;
      			margin-top: 15px;
      			margin-left: 15px;
			}
			
			.airsave-text {
				position: absolute;
  				transform: translate(-50%, -40%);
  				top: 40%;
  				max-width: 90%;
  				left: 50%;
				
				@media (max-width: 1050px) {
					max-height: 90%;
				}
			}
			
			@media (max-width: 1050px) {
				width: 100%;
			}
		}
		
		.green-bg {
			background-color: var(--dark-green);
			color: white;
		}
		
		.airsave-ticker {
			background-color: #F4E7CF;
			background-image: url( '../images/textured-background.png' );
			background-size: 50%;
			width: 67%;
			display: flex;
			flex-direction: column;
			gap: 50px;
			padding: 2rem;
			padding-bottom: 0;
			
			@media (max-width: 1050px) {
				width: 100%;
			}
			
			@media (max-width: 500px) {
				padding: 2rem 10px 0;
			}
			
			@media (max-width: 375px) {
				zoom: 0.85;
			}
		}
		
		.savings-wrapper {
			padding-top: 2rem;
			display: flex;
        	justify-content: space-between;
			
			@media (max-width: 680px) {
				flex-direction: column-reverse;
				gap: 50px;
				padding-top: 0;
			}
		}
		
		.savings-stats {
			position: relative;
			display: flex;
			
			@media (max-width: 680px) {
				max-width: fit-content;
				padding-bottom: 2rem;
			}
			
			.kwh-saved {
				width: 10rem;
				height: 10rem;
				padding: 0 2rem;
				border-radius: 50%;
				display: flex;
				align-items: center;
			
				& p {
					color: white;
					font-size: 1rem;
					text-align: center;
					margin-bottom: 0;
				}
			}
		
			.stats-arc {
				position: absolute;
				border: 1rem solid var(--dark-green);
				border-top-right-radius: 10rem;
				border-top-color: transparent;
				border-bottom-right-radius: 10rem;
				border-bottom-color: transparent;
				border-left: 0;
    			display: inline-block;
    			min-width: 10em;
    			min-height: 20em;
				top: -5rem;
				left: 4.5rem;
			}
			
			.savings {
				position: absolute;
				display: grid;
				grid-template-columns: 100%;
				width: 100%;
				gap: 20px;
				
				& p {
					font-weight: bold;
					color: var(--dark-green);
				}
				
				.money-saved {
					display: flex;
					align-items: center;
					gap: 10px;
					position: absolute;
					right: -155px;
    				top: -20px;
				}
				
				.co2-saved {
					display: flex;
					align-items: center;
					gap: 10px;
					position: absolute;
    				line-height: normal;
    				top: 64px;
    				right: -177px;
				}
				
				.trees-saved {
					display: flex;
					align-items: center;
					gap: 10px;
					position: absolute;
    				line-height: normal;
					right: -124px;
					top: 137px;
				}
			}
		}
		
		.what-to-expect {
			display: flex;
			flex-direction: column;
			justify-content: center;
			background-color: var(--dark-green);
			padding: 0.5rem 1rem;
			
			@media (max-width: 680px) {
				align-self: center;
				max-width: fit-content;
			}
			
			& * {
				color: white;
			}
			
			& h2 {
				text-align: center;
				text-decoration: underline;
				margin-bottom: 0;
			}
			
			& ul {
				padding-left: 18px;
			}
			
			& li {
				margin: 0;
				line-height: normal;
			}
		}
		
		.flow-chart {
			display: flex;
			flex-wrap: wrap;
			gap: 30px;
			z-index: 1;
			text-align: center;
			
			@media (max-width: 500px) {
				zoom: 0.8;
			}
			
			& p {
				padding: 0.5rem;
				margin: 0;
				display: inline-block;
			}
			
			.valves-in-operation {
				flex-basis: 100%;
				flex-grow: 1;
				position: relative;
			}
			
			.bodymakers,
			.cuppers,
			.bodymaker-scf, 
			.cupper-scf {
				flex-basis: calc(50% - 25px);
				flex-grow: 1;
				position: relative;
			}
			
			.bodymakers,
			.bodymaker-scf {
				text-align: right;
			}
			
			.cuppers,
			.cupper-scf {
				text-align: left;
			}
			
			.bodymaker-scf {
				padding-right: 85px;
			}
			
			.cupper-scf {
				padding-left: 68px;
			}
			
			.bodymaker-scf span,
			.cupper-scf span {
				display: inline-block;
				width: 100%;
				text-align: center
			}
			
			& hr {
				margin:0;
				height:	2px;
				background-color: #9EC464;
				border: 0;
				z-index: -1;
			}
				
			.vert-1 {
				transform: rotate(90deg);
				width: 54px;
				position: absolute;
            	bottom: -27px;
            	left: calc(50% - 27px);
			}
				
			.hor-1 {
				width: 50px;
				position: absolute;
            	bottom: -54px;
            	left: calc(50% - 25px);
			}
				
			.vert-2 {
				transform: rotate(90deg);
				width: 75px;
				position: absolute;
            	bottom: -30px;
            	right: 30px;
			}
				
			.hor-2 {
				width: 20px;
				position: absolute;
            	bottom: -67px;
            	right: 66.5px;
			}
				
			.vert-3 {
				transform: rotate(90deg);
				width: 75px;
				position: absolute;
            	bottom: -30px;
            	left: 13px;
			}
				
			.hor-3 {
				width: 20px;
				position: absolute;
            	bottom: -67px;
            	left: 49.5px;
			}
		}
		
		.notes {
			display: flex;
			justify-content: center;
			
			& p {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				font-size: 0.7rem;
				width: 350px;
			}
		}
	}