@media all and (min-width: 0px) {
	.element-block-wrapper {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		align-items: center;
		justify-content: center;
		min-height: 300px;
		color: inherit;
	}

	.element-block-image {
		width: 100%;
		overflow: hidden;
	}

	.element-block-image img {		
		width: 100%!important;
		height: auto!important;
	}

	.element-block-content {
		width: 90%;
		max-width: 1000px;
		margin: 0 auto;
		padding: 1em;
		box-sizing: content-box;
	}
}

@media all and (min-width: 600px) {
	.feature-tiles-wrapper {
		width: 100%;
		padding: 0;
	}

	.feature-mobile {
		display: none;
	}

	.feature-desktop {
		display: block;
	}

	.feature-tile-item {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		width: 100%;
		overflow: hidden;
		padding: 1em 1.5em;
		box-sizing: border-box;
		min-height: 700px;
		min-height: 70%;
		min-height: 70vh;
		background-size: cover!important;
	}

	.feature-tile-content {
		padding: 2.5em 2em;
		box-sizing: border-box;
		width: 95%;
		min-width: 500px;
		max-width: 700px;
		line-height: 1.35em;
		color: #222;
		font-size: 1em!important;
	}
}

@media all and (min-width: 768px) {
	.element-block-wrapper {
		flex-wrap: nowrap;
		padding: 0!important;
		margin: 0 auto!important;
	}

	.element-block-image {
		width: 20%;
		overflow: hidden;
	}
}

@media all and (min-width: 1000px) {
	.feature-tile-item {
		min-height: 700px;
		min-height: 70%;
		min-height: 70vh;
	}
}

@media all and (min-width: 1024px) {
	.element-block-image {
		width: 33%;
	}
}

@media all and (min-width: 0px) and (max-width: 600px) {
	.feature-tiles-wrapper {
		width: 100%;
		padding: 0;
	}
	
	.feature-tile-item {
		width: 100%;
		padding: 0;
		display: block;
		align-items: center;
	}

	.feature-tile-content {
		padding: 2em;
		box-sizing: border-box;
		width: 100%;
		font-size: 1em;
		line-height: 1.55em;
		z-index: 500;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	.feature-mobile {
		display: inherit;
	}

	.feature-desktop {
		display: none;
	}
}


@media (max-width: 500px) {
    .animated-content-tile-wrapper {
        flex-direction: column;
        justify-content: center;
        align-items: center;
		padding: 2em 10%;
    }
    
    .animated-content-tile-text, 
    .animated-content-tile-image {
        flex: unset;
        max-width: 100%;
		width:95%;
        padding-left: 0;
        padding-right: 0;
    }
    
    .animated-content-tile-image img {
        max-width: 95%;
    }
}

@media (min-width: 501px) {
	.animated-content-tile-text {   
		width:55%;
	}
	.animated-content-tile-image {
		max-width:35%;
	}
}

.animated-content-tile-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 400px;
    min-height: 40vh;
	padding: 1em;
    overflow-x: hidden;
    position: relative;
	box-sizing:border-box;
}


.animated-content-tile-text {
    flex: 1;
    padding-left: 50px;
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
	box-sizing:border-box;
	padding:0 10px;
}

.animated-content-tile-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
}

.animated-content-tile-image img {    
	max-height:500px;
}

.animated-content-tile-div.active .animated-content-tile-text {
    transform: translateX(0);
    opacity: 1;
}

.animated-content-tile-div.active .animated-content-tile-image {
    transform: translateX(0);
    opacity: 1;
}

.aB3rK6-element-block:nth-of-type(odd) .feature-tile-item {
    justify-content: flex-start;
    text-align: left;
}

.aB3rK6-element-block:nth-of-type(even) .feature-tile-item {
    justify-content: flex-end;
    text-align: left;
}

/* --------------------------------------------------------------------------
 * Archaic declarations retained for reference only.
 * Modern KWS Elements targets WordPress/PHP/browser versions with standards-
 * based Flexbox and background-size support, so these prefixes duplicated the
 * active declarations above and are intentionally disabled.
 * --------------------------------------------------------------------------
 * display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex;
 * -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap;
 * -webkit-align-items:center; -moz-align-items:center; -ms-align-items:center;
 * -webkit-justify-content:center; -moz-justify-content:center; -ms-justify-content:center;
 * -webkit-flex-direction:row; -ms-flex-direction:row;
 * -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover;
 * Duplicate .animated-content-tile-image max-width:35% declaration retired.
 */