//	Article - Front Page
.offerings-and-logo {
	$breakPoint: 806px; // Changing Layout
	$breakPoint2: 1200px; // Sizing Up Typography, Padding, Logo

	background: white;
	text-align: center;
	padding: 0 0 2em;

	@media only screen and ( min-width:$breakPoint ) {
		padding: 2em 0;
	}		

	.container {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-evenly;

		@media only screen and ( min-width:$breakPoint ) {
			flex-direction: row-reverse;
		}		
	}

	.item {
		flex: 0 0 100%;

		@media only screen and ( min-width:$breakPoint ) {
			flex: 0 0 30%;
		}		
	}

	/*
		Logo & Tagline

	 */
	.branding {
		padding: 0 1em .5em;

		@media only screen and ( min-width:$breakPoint2 ) {
			padding: 0 2em;
		}		
	}

	img.logo {
		display: none;
		width: 80%;
		margin: 0 auto 2em;
		max-width: 140px;

		@media only screen and ( min-width:$breakPoint ) {
			display: block;
		}		

		@media only screen and ( min-width:$breakPoint2 ) {
			max-width: 220px;
		}		
	}

	p.tagline {
		color: $base-accent-color;
		font-size: 1.4em;
		font-family: $header-font-family;
		letter-spacing: 2px;
		text-align: center;
		padding-top: 1em;

		@media only screen and ( min-width:$breakPoint ) {
			border-top: 1px solid;
		}

		@media only screen and ( min-width:$breakPoint2 ) {
			font-size: 2em;
		}		
	}


	/*
		Sub Flex Box: Squares;

	 */
	.item.offerings {
		font-size: .9em;

		@media only screen and ( min-width:$breakPoint ) {
			flex-basis: 70%;
			font-size: 1em;
		}		

		display: flex;
		flex-wrap: wrap;
		align-items: center;

		.item {
			flex: 0 0 49%;
			margin-right: 2%;

			&:nth-child(1),
			&:nth-child(2),
			&:nth-child(3),
			&:nth-child(4) {
				margin-bottom: 2%;
			}

			&:nth-child(2n) {
				margin-right: 0;
			}

			@media only screen and ( min-width:$breakPoint ) {
				flex: 0 0 32%;

				&:nth-child(2n) {
					margin-right: 2%;
				}

				&:nth-child(4) {
					margin-bottom: 0%;
				}

				&:nth-child(3n) {
					margin-right: 0;
				}
			}

			padding: 1em .5em;

			@media only screen and ( min-width:$breakPoint ) {
				padding: 1em;
			}		

			@media only screen and ( min-width:$breakPoint2 ) {
				padding: 2em;
			}		

			background: $base-accent-color;
			color: white;

			&:last-child {
				background: lighten($site-yellow,10);

				a {
					transition: all .2s ease;
					color: #5a5a5a;

					&:hover {
						color: #444;

						p.title {
							color: #444;
						}
					}
				}

				p.title {
					color: #5a5a5a;
				}
			}
		}

		p.title {
			color: lighten($site-yellow,10);
			font-size: 1.1em;
			font-weight: 700;
			text-transform: uppercase;
			margin-bottom: .25em;

			@media only screen and ( min-width:$breakPoint2 ) {
				font-size: 1.4em;
			}		
		}
	}
}