/**
 * Index stylesheet for BK Modelbouw
 *
 * @author      Wouter Van den Heede
 *
 */

/* =============================================
 * INDEX PAGE - NEW PRODUCT
 =============================================== */
#highlight h2 {
	margin-top: 4rem;
	border-bottom: 2px solid #27223E;
	width: 26rem;	
}

#highlight article img {
	width: 100%;
	padding-top: 3.7rem;
}

#highlight article p {
	vertical-align: top;
	margin-top: 3rem;
	padding-bottom: 2rem;
}

/* button */
#highlight .more {
	display: block;
	text-align: center;
	margin: 0 auto;
}

/* =============================================
 * INDEX PAGE - EVENTS
 =============================================== */
#events {
	background-color: #DFCFBA;
	padding-bottom: 6rem;
	margin-top: 6rem;
}

#events h2 {
	text-align: center;
	padding-top: 4rem;
	border-bottom: 2px solid #27223E;
	width: 37rem;
	margin: 0 auto;
}

#events h3 {
	font-family: "Times New Roman";
	font-style: italic;
	font-size: 2.3rem;
	line-height: 1.4em;
	font-weight: bold;
}

#events .left {
	background-image: url(../images/evenement.jpg);
	background-repeat: no-repeat;
	background-position: 50% 3rem;
}

#events .middle, .right {
	background-image: url(../images/evenement.jpg);
	background-repeat: no-repeat;
	background-position: 50% 6rem;
}

/* left */
#events .left {
	text-align: center;
	padding-top: 9rem;
}

#events .left p {
	color: #FFFFFF;
	padding-bottom: 2rem;
}

/* middle */
#events .middle {
	text-align: center;	
	padding-top: 12rem;
}

#events .middle p {
	color: #FFFFFF;
	padding-bottom: 2rem;
}

/* right */
#events .right {
	text-align: center;
	padding-top: 12rem;
}

#events .right p {
	color: #FFFFFF;
	padding-bottom: 2rem;
}

/* =============================================
 * INDEX PAGE - BEST SELLER
 =============================================== */
#bestsellers h2 {
	padding-top: 4rem;
	border-bottom: 2px solid #27223E;
	width: 17.5rem;
}

/* left */
#bestsellers .left {
	margin-bottom: 5rem;
}

#bestsellers .left img {
	width: 100%;
	padding-top: 3rem;
	padding-bottom: 2rem;
}

#bestsellers .left p:nth-of-type(2) {
	margin-bottom: 3rem;
	font-weight: bold;
}

/* right */
#bestsellers .right {
	margin-bottom: 6rem;
}

#bestsellers .right img {
	width: 100%;
	padding-top: 3rem;
	padding-bottom: 2rem;
}

#bestsellers .right p:nth-of-type(2) {
	margin-bottom: 3rem;
	font-weight: bold;
}

/* button */
#bestsellers .more {
	display: block;
	text-align: center;
	margin: 0 auto;
}

/* ===============
   Media queries
   =============== */
@media (max-width: 30em) { /* your breakpoint in em here */
	#events h2 {
		width: 19rem;
		text-align: center;
	}
}

@media (min-width: 45em) { /* your breakpoint in em here */
	/* =============================================
	 * INDEX PAGE - NEW PRODUCT
	 =============================================== */
	#highlight h2 {
		margin-left: 53%;
	}

	#highlight article img {
		float: left;
		width: 40%;
		margin-left: 13%;	
		padding-right: 2rem;
	}

	#highlight article p {
		width: 40%;
		margin-right: 7%;
		float: right;
	}

	#highlight .more {
		margin-left: 53%;
	}

	/* button */
	#highlight .more {
		display: inline-block;
	}

	/* =============================================
	 * INDEX PAGE - EVENTS
	 =============================================== */
	#events {
		clear: both;
		overflow: hidden;
	}

	#events .middle {
		background-image: url(../images/evenement.jpg);
		background-repeat: no-repeat;
		background-position: 50% 4rem;
	}

	#events .left, .right {
		background-image: url(../images/evenement.jpg);
		background-repeat: no-repeat;
		background-position: 50% 4rem;
	}

	/* left */
	#events .left {
		float: left;
		width: 25%;
		margin-right: 10%;
		padding-top: 10rem;
	}

	/* middle */
	#events .middle {
		float: left;
		width: 30%;
		padding-top: 10rem;
	}

	/* right */
	#events .right {
		float: right;
		width: 25%;
		padding-top: 10rem;
	}

	/* =============================================
	 * INDEX PAGE - BEST SELLER
	 =============================================== */
	 /* left */
	#bestsellers .left {
		width: 44%;
		float: left;
	}

	/* right */
	#bestsellers .right {
		width: 44%;
		float: right;
	}

	/* button */
	#bestsellers .more {
		display: inline-block;
	}
}