@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-container {
		width: 100%;
		max-width: 100%;
	}

	.element-block-content {
		position: relative;
		isolation: isolate;
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		overflow: visible;
	}

	.element-block-wrapper.kws-element-block-has-background {
		display: block;
		width: 100%;
		max-width: none;
	}

	.element-block-content.kws-content-has-background {
		width: 100%;
		max-width: none;
		min-height: clamp(620px, 82vh, 980px);
		flex: 0 0 100%;
	}

	.element-block-content.kws-content-vertical-center .kws-content-block-inner {
		min-height: 500px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.element-block-content.kws-content-has-background.kws-content-vertical-center .kws-content-block-inner {
		min-height: clamp(620px, 82vh, 980px);
	}

	.kws-content-background-layer {
		position: absolute;
		z-index: 0;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		pointer-events: none;
	}

	.kws-content-background-image,
	.kws-content-background-video {
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		margin: 0;
		padding: 0;
		object-fit: cover;
	}

	.kws-content-background-image {
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.kws-content-block-inner {
		position: relative;
		z-index: 1;
		width: 94%;
		max-width: 1400px;
		margin: 0 auto;
		padding: 1em;
		box-sizing: border-box;
		text-align: inherit;
	}

	/* Match Showcase legibility only when a Content Block has real background media. */
	.element-block-wrapper .element-block-content.kws-content-has-background > .kws-content-block-inner {
		text-shadow: 0 2px 5px #222222;
	}

	/* Buttons should retain their authored appearance rather than inheriting the
	   media-background legibility shadow from the surrounding block. */
	.element-block-wrapper .element-block-content.kws-content-has-background > .kws-content-block-inner :is(a.button, .button, .btn, button) {
		text-shadow: none !important;
	}

	.kws-content-block-inner img {
		display: block;
		max-width: 100%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}

}

@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.
 */

/* v45: decorative content edges inserted by the shared TinyMCE tools. */
.kws-content-edge{display:block;width:100%;max-width:none;margin:0;padding:0;line-height:0;overflow:hidden;box-sizing:border-box;}
.kws-content-edge img{display:block;width:100%;max-width:none;height:auto;margin:0;padding:0;}


/* v46 Content Block presentation */
.kws-content-edge{
    display:block;
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    padding:0!important;
    line-height:0;
    overflow:hidden;
}
.kws-content-edge img{width:100%!important;max-width:none!important;height:auto!important;margin:0!important;}
@media (min-width:1200px){.kws-content-block-inner{width:96%;max-width:1500px;}}

@media (max-width:768px){
  .element-block-content.kws-content-has-background,
  .element-block-content.kws-content-has-background.kws-content-vertical-center .kws-content-block-inner{min-height:clamp(520px,72svh,760px);}
}


/* v55: Border Images are full-bleed decorative separators with no vertical
 * wrapper/image spacing of their own. */
.kws-content-edge{
    padding-top:0!important;
    padding-bottom:0!important;
    margin-top:0!important;
    margin-bottom:0!important;
}
.kws-content-edge>img{
    display:block!important;
    margin-top:0!important;
    margin-bottom:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
}

/* v56: Border Images decorate the Content Block canvas itself, not the
 * readable .kws-content-block-inner column. */
.element-block-content > .kws-content-edge{
    position:absolute!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    z-index:3;
    line-height:0;
    overflow:visible;
    pointer-events:none;
}
.element-block-content > .kws-content-edge-top{
    top:0!important;
    bottom:auto!important;
}
.element-block-content > .kws-content-edge-bottom{
    top:auto!important;
    bottom:0!important;
}
.element-block-content > .kws-content-edge > img{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
}


/* v58: reserve flow space equal to absolutely-positioned Border Images. The
 * percentage custom properties are image height/width ratios calculated by
 * the renderer, so the reserved space scales with the block width. */
.element-block-content::before,
.element-block-content::after{
    content:"";
    display:block;
    width:100%;
    height:0;
    pointer-events:none;
    position:relative;
    z-index:0;
}
.element-block-content::before{padding-top:var(--kws-border-top-space,0%);}
.element-block-content::after{padding-top:var(--kws-border-bottom-space,0%);}
