/* Hero MPU */

	#hero {
		margin-top: 30px;
		height: 450px;
		overflow: hidden;
	}

	#hero .slide {
		width: 100%;
		margin: 0;
		height: auto;
		min-height: 450px;
	}

	#hero .slide a {
		display: block;
		text-decoration: none;
		padding: 0;
		margin: 0;
		line-height: 0;
		max-width: 1200px;
		min-height: 450px;
	}

	#hero .slide img {
		display: none;
	}

	#hero .slide-content {
		display: inline-block;
		padding: 60px 80px;
		width: auto;
		text-align: center;
		margin: 75px 0 0 0;
	}
	
	#hero h4 {
		color: #fff;
		font-family: 'Archer SSm A', 'Archer SSm B', georgia, times new roman, serif;
		font-style: normal;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		margin: 0 0 10px;
	}
	
	#hero h3 {
		font-family: 'Asap', helvetica, arial, sans-serif;
		font-size: 3em;
		font-weight: 700;
		text-transform: uppercase;
		margin: 0 0 10px;
	}
	
	#hero h5 {
		font-family: 'Asap', helvetica, arial, sans-serif;
		font-weight: 500;
		font-size: 2.1em;
		margin: 0 0 10px 0;
		text-transform: uppercase;
		letter-spacing: 0em;
	}
	
	#hero span {
		font-family: 'Asap', helvetica, arial, sans-serif;
		font-weight: 500;
		font-size: 0.8em;
		text-transform: uppercase;
		background: none;
		border: 2px solid #fff;
		color: #fff;
		padding: 20px 25px;
		margin: 15px 0 0;
		letter-spacing: 0.04em;
		display: inline-block;
	}

	/* BONUS15 */
	
	#hero #bonus15 a {
		background: url(../images/mpu/mpu-3.jpg) 50% 100% no-repeat;
	}
	
	#hero #bonus15 .slide-content, #hero #bonus15 {
		background-color: #1c3b53;
	}
	
	#hero #bonus15  h3 { color: #94b0cb; }
	#hero #bonus15  h5 { color: #fff; }
	#hero #bonus15 button { border-color: #fff; }		
	
	#hero #bonus15 small {
		display: block;
		color: #fff;
		margin: 2.5em 0 0;
	}
	
	/* AW15 */
	
	#hero #aw15 a {
		background: url(../images/mpu/mpu-4.jpg) 50% 100% no-repeat;
	}
	
	#hero #aw15 .slide-content, #hero #aw15 {
		background-color: #213055;
	}
	
	#hero #aw15  h3 { color: #de9947; }
	#hero #aw15  h5 { color: #fff; }
	#hero #aw15 button { border-color: #fff; }	
	
	/* Outdoors */
	
	#hero #outdoors a {
		background: url(../images/mpu/mpu-2.jpg) 50% 100% no-repeat;
	}
	
	#hero #outdoors .slide-content, #hero #outdoors {
		background-color: #d53213;
	}
	
	#hero #outdoors  h3 { color: #37cfee; }
	#hero #outdoors  h5 { color: #fff; }
	#hero #outdoors button { border-color: #e88573; }	
	
	
/* Benefits */

#benefits {
	background-color: #1b1b23;
	color: #fff;
	font-family: 'Asap', helvetica, arial, sans-serif;
	font-size: 1.2em;
	font-weight: 500;
	margin: 0 0 35px;
	padding: 25px 20px 35px;
}

#benefits span {
	display: inline-block;
	width: 25%;
	float: left;
	text-transform: uppercase;
	text-align: center;
}

#benefits span strong {
	font-weight: 700;
	color: #db7827;
}

#benefits span img {
	display: inline-block;
	margin-right: 15px;
	position: relative;
	top: 5px;
	z-index: 0;
}

#benefits span.delivery img {
	width: 29px;
	height: 24px;
}

#benefits span.save img {
	width: 26px;
	height: 24px;
}

#benefits span.returns img {
	width: 22px;
	height: 24px;
}

#benefits span.authentic img {
	width: 20px;
	height: 24px;
}

/* Categories */

#shop-categories {
	margin-bottom: 30px;
}

.categories-slider .category {

	width: 100%;
	float: left;
	text-align: center;
	padding: 35px 0 225px;
}

.categories-slider .category h2 {
	font-family: 'Archer SSm A', 'Archer SSm B', georgia, times new roman, serif;
	font-style: normal;
	font-weight: 600;
	color: #fff;
	text-transform: uppercase;
	margin: 0 0 25px 0;
	padding: 0;
}

.categories-slider .category h2 span {
	display: block;
	font-family: 'Asap', helvetica, arial, sans-serif;
}

.categories-slider .category a {
	font-family: 'Asap', helvetica, arial, sans-serif;
	font-size: 1.1em;
	color: #fff;
	padding: 8px 14px;
	border: 1px solid #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.categories-slider #kanken-classic { background: url(../images/home/classic.png) #f4b600 50% 100% no-repeat; }
.categories-slider #kanken-classic h2 span { color: #b41f32; }
.categories-slider #kanken-classic a:hover { border-color: #ffd149; }

.categories-slider #kanken-mini { background: url(../images/home/mini.png) #419db0 50% 100% no-repeat; }
.categories-slider #kanken-mini h2 span { color: #f8e50e; }
.categories-slider #kanken-mini a:hover { border-color: #57c9e1; }

.categories-slider #kanken-maxi { background: url(../images/home/maxi.png) #664580 50% 100% no-repeat; }
.categories-slider #kanken-maxi h2 span { color: #9cadbb; }
.categories-slider #kanken-maxi a:hover { border-color: #a177c3; }

.categories-slider #kanken-big { background: url(../images/home/big.png) #cc4343 50% 100% no-repeat; }
.categories-slider #kanken-big h2 span { color: #261f1b; }
.categories-slider #kanken-big a:hover { border-color: #e96262; }

.categories-slider #kanken-laptop { background: url(../images/home/laptop.png) #ed5222 50% 100% no-repeat; }
.categories-slider #kanken-laptop h2 span { color: #ecdbc1; }
.categories-slider #kanken-laptop a:hover { border-color: #fb744b; }

.categories-slider #kanken-kids { background: url(../images/home/kids.png) #109951 50% 100% no-repeat; }
.categories-slider #kanken-kids h2 span { color: #fead39; }
.categories-slider #kanken-kids a:hover { border-color: #2ccb77; }

.categories-slider #kanken-no2 { background: url(../images/home/no2.png) #33a79d 50% 100% no-repeat; }
.categories-slider #kanken-no2 h2 span { color: #004b75; }
.categories-slider #kanken-no2 a:hover { border-color: #69d6cd; }

/* Social */

#social {
	margin-bottom: 35px;
}

#social .column {
	float: left;
	width: 33.3%;
}

/* Gallery */

#gallery {
	min-height: 600px;
	overflow: hidden;
}

#gallery .image {
	position: relative;
	padding: 0;
	line-height: 0;
	height: 100%;
}

#gallery img {
	position: relative; 
}

#gallery .image .caption {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	background-color: #ef3e42;
}

#gallery span {
	display: inline-block;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 18px 14px;
	background-color: #ef3e42;
	font-family: 'Asap', helvetica, arial, sans-serif;
	text-transform: uppercase;
	font-size: 0.8em;
	letter-spacing: 0.03em;
	z-index: 5;
	color: #fff;
}


/* Instagram */

#instagram {
	background: url(../images/home/instagram.png) #24384a 0 100% no-repeat;
}

#instagram h3 {
	font-family: 'Asap', helvetica, arial, sans-serif;
	font-size: 3.4em;
	letter-spacing: 0.02em;
	font-weight: 500;
	color: #fff;
	text-align: center;
	margin: 50px 0 20px;
	text-transform: uppercase;
}

#instafeed {
	width: 70%;
	margin: 0 auto;
	padding: 0;
}

#instafeed li {
	list-style-type: none;
	float: left;
	width: 38%;
	margin: 6%;
	text-align: center;
}

#instafeed li a {
	display: block;
	line-height: 0;
}

#instafeed li img {
	max-width: 100%;
	border: 5px solid #fff;
}

/* News */

.latest-arrivals, .facebook {
	height: 50%;
	color: #fff;
	position: relative;
}

.latest-arrivals {
	background-color: #f3ab2b;
}

.facebook {
	background: url(../images/home/facebook.jpg) #302b2b 50% 50% no-repeat;
}

/* Latest Arrivals */

.arrivals-content {
	position: absolute;
	top: 25%;
	width: 100%;
	text-align: center;
}

.arrivals-content h3 {
	margin: 0 0 20px 0;
	padding: 0;
	text-align: center;
	font-family: 'Archer SSm A', 'Archer SSm B', georgia, times new roman, serif;
	font-style: normal;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.8em;
	color: #fff;
}

.arrivals-content h3 strong {
	display: block;
	font-family: 'Asap', helvetica, arial, sans-serif;
	font-weight: 700;
	font-size: 2.3em;
	text-transform: uppercase;
}

.facebook .arrivals-content h3 { font-size: 2.3em; }
.facebook .arrivals-content h3 strong { font-size: 1.1em; }

.latest-arrivals a {
	display: inline-block;
	font-family: 'Asap', helvetica, arial, sans-serif;
	font-weight: 700;
	font-size: 1.2em;
	text-decoration: none;
	text-transform: uppercase;
	color: #fff;
	padding: 15px 25px;
	border: 2px solid #f3a12b;
}

.latest-arrivals a:hover {
	border-color: #ffdb6f;
}

.latest-arrivals span {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	padding: 8px 14px;
	background-color: #ef3e42;
	font-family: 'Asap', helvetica, arial, sans-serif;
	text-transform: uppercase;
	font-size: 0.8em;
	letter-spacing: 0.03em;
}

/* Facebook */

.facebook .triangle {
	position: absolute;
	width: 0;
	height: 0;
	border-top: 105px solid #ef3e42;
	border-right: 105px solid transparent;
}

.facebook .triangle > span { 
	position: absolute; 
	top: -88px;
	left: 14px;
	transform: rotate(-45deg);
	text-transform: uppercase;
	font-family: 'Asap', helvetica, arial, sans-serif;
	font-size: 0.9em;
	line-height: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.facebook h3 {
	margin: 0;
}

.facebook a {
	color: #fff;
	text-decoration: none;
	border: 0;
}

.facebook a:hover {
	color: #f3ab2b;
}

.facebook img {
	margin: 0 auto;
	display: block;
	margin-bottom: 25px;
}

/* ---------------------------

	=== Phone styles ===

-----------------------------*/

/* Smaller than large 1200 (devices and browsers) */
@media only screen and (max-width: 1199px) {

	/* Benefits */
	#benefits {
		font-size: 1em;
	}
	
}


/* Smaller than standard 980 (devices and browsers) */
@media only screen and (max-width: 979px) {

	/* Hero */
	#hero .slide {
		min-height: 0;
	}

	/* Benefits */
	#benefits {
		font-size: 1em;
	}
	
	#benefits span img {
		display: block;
		margin: 0 auto 15px;
	}


	/* Social */
	#social #gallery	{
		width: 40%;
		overflow: hidden;
		min-height: 0;
	}
	
	#social #gallery span {
		top: 0;
		bottom: auto;
	}
	
	#social #instagram {
		width: 60%;
	}
	
	#social #instagram li {
		width: 25%;
		margin: 4%;
	}
	
	#social #gallery img {
		max-width: 100%;
	}
	
	#social #news {
		clear: both;
		float: none;
		width: 100%;
	}
	
	#news .latest-arrivals,
	#news .facebook {
		width: 50%;
		float: left;
		height: 250px;
	}
	
	#news .arrivals-content {
		position: static;
		margin: 50px 0 0;
	}
	
	#news .latest-arrivals h3 {
		margin-bottom: 10px; 
	}

}


/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

	/* Hero */
	
	#hero { 
		margin-top: 20px;
	}
	
	#hero h3 {
		font-family: 'Asap', helvetica, arial, sans-serif;
		font-size: 2.4em;
		font-weight: 700;
		text-transform: uppercase;
		margin: 0 0 10px;
	}
	
	#hero h5 {
		font-family: 'Asap', helvetica, arial, sans-serif;
		font-weight: 500;
		font-size: 2.1em;
		margin: 0 0 10px 0;
		text-transform: uppercase;
		letter-spacing: 0em;
	}
	
	#hero span {
		font-family: 'Asap', helvetica, arial, sans-serif;
		font-weight: 500;
		font-size: 0.8em;
		text-transform: uppercase;
		background: none;
		border: 2px solid #fff;
		color: #fff;
		padding: 20px 25px;
		margin: 25px 0 0;
		letter-spacing: 0.04em;
		display: inline-block;
	}
	
	
	/* Benefits */
	
	#benefits { padding-bottom: 25px; }
	
	#benefits span {
		display: block;
		margin: 0 2% 15px 3%;
		width: 20%; 
	}

	/* Social */
	
	#social #instagram h3 {
		font-size: 3em;
	}
	
	#news .arrivals-content {
		position: static;
		margin: 65px 0 0;
	}

	#news .latest-arrivals h3 {
		font-size: 1.4em;
	}
	
	#news .facebook h3 {
		font-size: 1.6em;
	}
	
	#news .facebook img {
		width: 50%;
	}
	
}


/* Large mobile devices */
@media only screen and (max-width: 667px) {

	/* Hero */
	#hero {
		height: auto;
	}
	
	#hero .slide {
		min-height: 0;
	}
	
	#hero .slide a {
		background-position: 80% 0 !important;
		padding-top: 200px;
		background-size: contain;
	}
	
	#hero .slide-content {
		display: block;
		padding: 40px 0;
		width: 100%;
		text-align: center;
	}

	/* Benefits */
	#benefits { padding-bottom: 15px; }
	
	#benefits span {
		display: block;
		margin: 0 2% 25px;
		width: 46%; 
	}

	/* Social */	
	#social #instagram h3 {
		font-size: 2em;
		margin-top: 30px;
	}
	
}



/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

	/* Social */
	#news .latest-arrivals,
	#news .facebook {
		width: 100%;
		float: left;
		height: 250px;
	}
	
	#gallery {
		display: none;
	}
	
	#social #instagram {
		width: 100%;
		padding-bottom: 30px;
	}
	
}