/**
 * Downloads specific styles
 * 
 */

/** General */
	.image-with-text {
		padding: 0;
		margin-top: 4em;
		margin-bottom: 4em;
	}
	.image-with-text + .image-with-text{
		margin-top: -4em;
	}

		.image-with-text > .container > div {
			flex: 0 50%;
		}

			.image-with-text .image-wrap {
				max-height: 425px;
				position: relative;
				background-repeat: no-repeat;
				background-position: 50% 50%;
				background-size: cover;
			}
				.image-with-text .image-wrap .image-icon {
					background-size: contain;
					height: 215px;
					width: 150px;	
					position: absolute;
					top: 1em;
				}
				.image-with-text .image-wrap.align-left .image-icon{
					left: 1em;
				}
				.image-with-text .image-wrap.align-right .image-icon{
					right: 1em;
				}

		.image-with-text .align-left {
			order: 1;
		}
		.image-with-text .align-right {
			order: 3;
		}

		.image-with-text .content-wrap {
			padding: 1em 0;
			order: 2;
		}

			.image-with-text .content-wrap .inner-wrap {
				box-sizing: border-box;
				max-width: 800px;
			}
			.image-with-text.left .content-wrap .inner-wrap {
				padding: 0 3% 0 4.5em;
			}
			.image-with-text.right .content-wrap .inner-wrap {
				padding: 0 4.5em 0 3%;
				float: right;
			}

				.image-with-text .content-wrap .inner-wrap h2 {
					font-size: 28px;
					font-weight: 600;
				}

	/** Responsive */
	@media only screen and (max-width: 959px) {
			
		.image-with-text {
			padding: 2em 0 0;
		}

		.image-with-text .container {
			flex-flow: column nowrap;
		}

			.image-with-text > div {
				flex: 0 100%;
			}
			.image-with-text .container > div.image-wrap {
				order: 1;
				min-height: 350px;
				background-repeat: no-repeat;
				background-position: 50% 50%; 
				background-size: cover;
			}
			.image-with-text  .container > div.content-wrap {
				order: 2;
				padding: 3em 0em 4em;
			}

				.image-with-text.left .content-wrap .inner-wrap,
				.image-with-text.right .content-wrap .inner-wrap {
					max-width: none;
					padding: 0 2em;
				}

	}

	@media only screen and (max-width: 550px) {
		.image-with-text .image-wrap .image-icon{
			height: 145px;
			width: 100px;
		}
	}


	@media only screen and (max-width: 400px) {

		.image-with-text.left .content-wrap .inner-wrap,
		.image-with-text.right .content-wrap .inner-wrap {
			max-width: none;
			padding: 0 1em;
		}

	}