/* CAROUSEL */
#content {
	position:absolute;
	top:0; right:0;
	overflow:auto;
	max-height:100%;
}
#carousel {
	position:relative;
}
#carousel:after {
	content:"";
	display:block;
	padding-top:43.7%;
	height:0;
}
.carousel-slide {
	position:absolute;
	top:0; left:0;
	width:100%; height:100%;
	opacity:0;
}
.carousel-slide:first-child {
	opacity:1;
}
.carousel-overlay {
	position:absolute;
	top:50%; right:10%;
	width:40%;
	-ms-transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	text-align:center;
	z-index:2;
}
.carousel-overlay-title {
	font: normal 300 50px/100% "GaramondPremrPro";
}
.carousel-overlay-title ~ .carousel-overlay-text {
	margin-top:5%;
}
.carousel-overlay-text {
	font: normal 300 19px/120% "GothamRnd";
}
.carousel-overlay-text ~ .carousel-overlay-btn {
	margin-top:10%;
}
.carousel-overlay-btn {
	display:inline-block;
	border:1px solid #293B47;
	text-transform:uppercase;
	padding:6px 10px;
	font: normal 300 13px/100% "GothamRnd";
	cursor:pointer;
}
.carousel-overlay-btn:hover {
	background-color:#FFFFFF;
}
@media all and (min-width: 1599px) {
	.carousel-overlay {
		max-width:460px;
		right:15%;
	}
	.carousel-overlay-title { font-size:60px; }
	.carousel-overlay-text  { font-size:22px; }
}

.carousel-image {
	position:absolute;
	top:0; left:0;
	width:100%; height:100%;
	object-fit:cover;
	z-index:1;
}
.carousel-control {
	position:absolute;
	top:0; bottom:0;
	margin:auto;
	width:66px; height:66px;
	cursor:pointer;
	z-index:3;
}
.carousel-control img {
	position:absolute;
	top:0; right:0; bottom:0; left:0;
	margin:auto;
}
#carousel-next { right:0; }
#carousel-prev { left:0; }
/* CAROUSEL */

/* TILES */
#tiles {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;

}
.tile {
	text-align:center;
	width:33.33%;
	box-sizing:border-box;
	position:relative;
}

.tile-inner {
	max-width:250px;
	left:0; right:0;
	margin:auto;
	padding:10% 0;
	padding-bottom:20%;
}
.tile-btn {
	font:normal 300 12px/120% "GothamRnd";
	border:1px solid;
	position:absolute;
	bottom:6%; left:0; right:0;
	width:105px;
	margin:auto;
	padding:5px;
	box-sizing:border-box;
}
.tile-btn:hover {
	color:#293B47;
	background-color:#FFFFFF;
}
.tile:nth-child(6n+1) { background-color:#5F7A87; }
.tile:nth-child(6n+2) { background-color:#293B47; }
.tile:nth-child(6n+3) { background-color:#00ADA9; }
.tile:nth-child(6n+4) { background-color:#EFF1F3; }
.tile:nth-child(6n+5) { background-color:#C7D0D5; }
.tile:nth-child(6n+6) { background-color:#FFFFFF; }
.tile:nth-child(-n+3) { color:#FFFFFF; }
.tile:nth-child(n+4)  { color:#293B47; }
.tile:nth-child(-n+3) .category-title,
.tile:nth-child(-n+3) .tile-title,
.tile:nth-child(-n+3) .tile-btn
{ border-color:#FFFFFF; }
.tile:nth-child(n+4)  .category-title,
.tile:nth-child(n+4)  .tile-title,
.tile:nth-child(n+4)  .tile-btn
{ border-color:#293B47; }

.category-title, .tile-title {
	display:block;
	margin:0 2%;
	font: normal 300 40px/100% "GaramondPremrPro";
	border-bottom:1px solid;
	margin-bottom:12%;
	min-height:80px;
}
.category-title {
	padding:2% 18%; padding-top:0;
}
.tile-title img {
	max-width:100%;
}
.category-description, .tile-description {
	font: normal 300 15px/140% "GothamRnd";
	margin-bottom:5%;
}
/* END TILES */

/* TILES IE FALLBACK - NO FLEXBOX <=IE9 */
#tiles:after {
	content:"";
	display:table;
	clear:both;
}
.tile {
	float:left;
}
.clear-iem.tile:nth-child(3n+1) {
	clear:both;	
}
.clear-ie {
	clear:both;
}
/* TILES END IE FALLBACK */

/* BRANDS */
#brands {
	background-color:#333333;
	padding:2% 4%;
	text-align:justify;
	text-justify:distribute-all-lines;
	font-size:0;
}
#brands:after {
	content:"";
	display:inline-block;
	width:100%;
	height:0; line-height:0;
}
.brand {
	display:inline-block;
	vertical-align:middle;
	text-align:center;
	max-width:16%;
}
.brand img {
	max-width:100%;
}
/* END BRANDS 

/* TABLET PORTRAIT TO MOBILE LANDSCAPE */
@media all and (min-width:421px) and (max-width: 1000px){
	.carousel-overlay-btn  { display:none; }
	.category-description, .tile-description {
		font-size:12px;
	}
	.brand img { max-width:90%;	}
	.tile {
		width:50%;
	}
	.tile-inner {
		padding-left:4%;
		padding-right:4%;
	}
	.category-title, .tile-title {
		font-size:30px;
		min-height:60px;
		margin-bottom:6%;
	}
}
/* TABLET PORTRAIT */
@media all and (min-width:600px) and (max-width: 1000px) {
	.carousel-overlay-title { font-size:28px; }
	.carousel-overlay-text  { font-size:13px; }
}

/* MOBILE LANDSCAPE */
@media all and (min-width:421px) and (max-width:600px) {
	.carousel-overlay-title { font-size:22px; }
	.carousel-overlay-text  { font-size:12px; }
	.category-title {
		font-size:30px;
		min-height:60px;
	}
}

/* MOBILE PORTRAIT */
@media all and (max-width: 420px) {
	#tiles {
		display:block;
	}
	.category-title, .tile-title {
		font-size:30px;
		min-height:initial;
		margin-bottom:4%;
	}
	.carousel-overlay {
		display:none;
	}
	.category-description, .tile-description {
		font-size:12px;
		margin-bottom:0;
	}
	.tile {
		width:100%;
		float:none;
	}
	.tile-inner {
		padding-top:4%;
	}
}