@media only screen {
	.tiles {
		position: relative;
		padding-bottom: 55px;
		opacity: 0;
		transition: opacity 500ms linear 500ms;
		visibility: hidden;
	}
	.tiles.loaded {
		visibility: visible;
		opacity: 1;
	}
	.tiles .slick-list {
		padding-left: 200px;
	}
	.tiles .slide-wrapper {
		position: relative;
		overflow: hidden;
		width: 170px;
		height: 170px;
		margin: 0 2px;
	}
	.tiles.no-slider .slide-wrapper {
		margin-bottom: 15px;
	}
	.tiles .image-wrapper {
		position: relative;
	}
	.tiles img {
		display: block;
		width: 100%;
	}
	.tiles .content-wrapper {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		margin-bottom: 10px;
		pointer-events: none;
		z-index: 1;
	}
	.tiles .title-banner {
		display: flex;
		align-items: center;
		position: relative;
		height: 50px;
		padding: 0 7px;
		z-index: 1;
		font-weight: 700;
		text-transform: uppercase;
		line-height: 1.1;
		word-break: break-word;
		color: white;
		background-color: #002252;
	}
	
	/* slider controls */
	.tiles .arrow-wrapper,
	.tiles.no-slider .arrow-wrapper {
		visibility: hidden;
	}
	.tiles .slick-dots {
		display: flex !important;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 90%;
		margin: 0 auto;
		bottom: -25px;
	}
	.tiles.dots-compact-style .slick-dots {
		flex-wrap: wrap;
		/*justify-content: flex-start;*/
	}
	.tiles .slick-dots li {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tiles .slick-dots li button {
		position: relative;
		border: 1px solid #002252;
		border-radius: 50%;
		width: 12px;
		height: 12px;
	}
	.tiles .slick-dots li button:before {
		left: -6px;
		top: -4px;
		font-size: 14px;
		color: transparent;
		background-color: white;
		opacity: 1;
	}
	.tiles .slick-dots li.slick-active button {
		background-color: #002252;
	}
	.tiles .slick-dots li.slick-active button:before {
		color: #002252;
		transform: scale(1.1);
		opacity: 1;
	}
}

@media only screen and (min-width: 40.063em) {
	.panel-two-col .tiles {
		margin-bottom: 0;
	}
	.tiles .slide-wrapper {
		margin: 0 5px;
	}
	.tiles .content-wrapper {
		height: auto;
	}
	.tiles.dots-compact-style .slick-dots {
		flex-wrap: nowrap;
		justify-content: center;
	}
	.tiles.dots-compact-style .slick-dots li {
		margin: 0 5px;
	}
}

@media only screen and (min-width: 64.063em) {
	.tiles {
		padding: 30px 0 60px;
	}
	.tiles .slide-wrapper {
		width: 275px;
		height: 275px;
		margin: 0 7px;
	}
	.tiles.no-slider .slides {
		margin: 0;
		justify-content: flex-start;
	}
	.tiles.no-slider .slide-wrapper {
		margin-left: 15px;
	}
	.tiles .title-banner {
		padding: 0 20px;
	}
	/* slider controls */
	.tiles .slick-dots {
		display: none !important;
	}
	.tiles .arrow-wrapper {
		visibility: visible;
	}
	.tiles .arrow-wrapper {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 280px;
		margin: 0 auto;
	}
	.tiles .arrow-wrapper .long-arrow {
		position: absolute;
		top: -5px;
		/* the width and height make the clickable area larger */
		height: 30px;
		width: 60px;
		cursor: pointer;
	}
	.tiles .arrow-wrapper .long-arrow.left {
		left: 0;
	}
	.tiles .arrow-wrapper .long-arrow.right {
		right: 0;
	}
	.tiles .arrow-wrapper .long-arrow:before {
		position: absolute;
		content: '';
		top: 50%;
		width: 30px;
		height: 2px;
		margin-top: -1px;
		background-color: #038595;
	}
	.tiles .arrow-wrapper .long-arrow:after {
		position: absolute;
		content: '';
		top: 50%;
		width: 0;
		height: 0;
		margin-top: -5px;
		border-style: solid;
	}
	.tiles .arrow-wrapper .long-arrow.left:before {
		left: 25px;
	}
	.tiles .arrow-wrapper .long-arrow.left:after {
		left: 20px;
		border-width: 5px 5px 5px 0;
		border-color: transparent #038595 transparent transparent;
	}
	.tiles .arrow-wrapper .long-arrow.right:before {
		right: 25px;
	}
	.tiles .arrow-wrapper .long-arrow.right:after {
		right: 20px;
		border-width: 5px 0 5px 5px;
		border-color: transparent transparent transparent #038595;
	}
	.tiles .arrow-wrapper .slide-message {
		display: inline-block;
		text-align: center;
		text-transform: uppercase;
		font-weight: 400;
		font-size: 14px;
		color: #038595;
	}
	/* end: long arrow wrapper */

}