/**
 * Home page
 * 
 * @since 2014.09.16
 */

/*
body {
	background: url('../../img/bg-home.jpg') no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
}
*/

.section.full-width.columns-2 {
	max-width: 970px;
}

.section .column.trouver p {
	margin-top: -6px;
}

.section .column.inspirez .caption {
	line-height: 12px;
}

.section .column.inspirez .thumb.left {
	float: left;
	margin: 0 18px 0 0;
	border: solid 5px #fff;
	height: 80px;
	width: 80px;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
}

.section .column.inspirez .thumb.left img {
	opacity: 0;
}

#Body .section.highlights { 
    padding: 20px 0;
}

.section.highlights .column {
    float: left;
    width: 50%;
    box-sizing: border-box;
}

.section.highlights .column:nth-child(2n+1) {
    padding: 20px 20px 34px 40px;
    clear: both;
}

.section.highlights .column:nth-child(2n) {
    padding: 20px 40px 34px 20px;
}

.section.highlights:after {
    content: '';
    display: block;
    clear: both;
}

.section.highlights h4 {
    margin: 14px 0 6px;
}

.section.highlights .img img {
    width: 420px;
    display: block;
    visibility: hidden;
}

.section.highlights .img {
    overflow: hidden;
    display: block;
    height: 189px;
    background-size: cover;
    background-position: center center;
}

#MobileSplash {
	display: none;
}


/* RESPONSIVE */
/**********************************************************************/

@media screen and (max-width: 959px) {

	#Body .section.highlights { 
		padding: 10px 0;
	}

	.section.highlights .column:nth-child(2n+1) {
		padding: 10px 10px 14px 20px;
	}

	.section.highlights .column:nth-child(2n) {
		padding: 10px 20px 14px 10px;
	}

}

@media screen and (max-width: 767px) {

	#Header .header-logo {
		left: 50%;
		top: 102px;
		margin: -97px -125px 0;
	}
	
	#Header .header-logo a {
		width: 250px;
		height: 136px;
		background-size: 250px auto;
	}

	#Body .section.highlights {
		background: transparent;
		padding: 0 0 10px;
	}
	
	.section.highlights .column {
		width: 100%;
		background: #fff;
		margin-top: 10px;
	}

	.section.highlights .column:nth-child(2n+1) {
		padding: 0 20px 20px;
	}

	.section.highlights .column:nth-child(2n) {
		padding: 0 20px 20px;
	}

	.section.highlights .img {
		margin: 0 -20px;
		height: 229px;
	}

	#Body .section .column.inspirez {
		display: none;
	}
	
	body.home-splash {
		overflow: hidden;
	}
	
	#MobileSplash {
		display: block;
		position: fixed;
		z-index: 90;
		overflow: auto;
		background: #333 url(../../img/home/splash.jpg) no-repeat center;
		background-size: cover;
		font-family: "Roboto Condensed", sans-serif;
		top: 0;
		bottom: 100%;
		padding: 0;
		left: 0;
		right: 0;
		transition: top .8s, bottom .8s, padding .8s;
	}
	
	body.home-splash #MobileSplash {
		top: 102px;
		bottom: 0;
		padding: 0 0 50px;
	}
	
	#MobileSplash .splash-wrapper {
		display: table;
		height: 100%;
		width: 100%;
	}
	
	#MobileSplash .splash-row {
		display: table-row;
	}
	
	#MobileSplash .splash-cell {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	
	#MobileSplash .splash-menu {
		height: 100%;
	}
	
	#MobileSplash .splash-menu a {
		display: block;
		width: 315px;
		max-width: 80vw;
		box-sizing: border-box;
		text-align: center;
		padding: 30px 20px 30px 50px;
		background: #ff9710;
		color: #000;
		text-transform: uppercase;
		font-size: 18px;
		font-weight: 400;
		border-radius: 3px;
		margin: 28px auto 8px;
	}
	
	#MobileSplash .splash-menu a.menu-stores {
		background-image: url(../../img/icon-address.svg);
		background-repeat: no-repeat;
		background-position: 21px center;
		background-size: 20px auto;
	}
	
	#MobileSplash .splash-menu a.menu-products {
		background-image: url(../../img/icon-sausage.svg);
		background-repeat: no-repeat;
		background-position: 20px center;
		background-size: 24px auto;
	}
	
	#MobileSplash .splash-continue a {
		color: #fff;
		font-size: 14px;
		border-bottom: solid 1px rgba(255,255,255,.3);
	}
}

@media screen and (max-width: 479px) {
	#Header {
		height: 21.25vw;
	}
	
	#Header .header-logo {
		top: 21.25vw;
		margin: -20.208333vw -26vw 0;
	}
	
	#Header .header-logo a {
		width: 52vw;
		height: 28.333333vw;
		background-size: 52vw auto;
	}
	
	#Header .header-open-button {
		top: 10.625vw;
		right: 10.625vw;
		margin: -30px;
	}
	
	body.home-splash #MobileSplash {
		top: 21.25vw;
	}
		
	#MobileSplash .splash-menu a {
		padding: 6.25vw 20px 6.25vw 50px;
	}
	
}