/*
 * @package	BM.Admin
 * @copyright	Copyright (c) Bienvenue-Multimedia (http://www.bienvenue-multimedia.ca)
 */

.slices{ position: relative; }
.slices > div{
	display: block;
	position: absolute;
	/*width: 33.33%;*/
	width: 50%;
	height: 64%;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	overflow: hidden;
}
div.slice-1,
div.slice-5{
	width: 100%;
	height: 18%;
}
div.slice-1{
	top: 0;
	left: 0;
	background: #696f78 url('../images/bckg-intro.jpg') no-repeat top center;
	background-size: cover;
}
div.slice-1:hover{ background-image: url('../images/bckg-intro-alt.jpg'); }
div.slice-2{
	top: 18%;
	left: 0;
	background: #c4262e url('../images/bckg-module-1.jpg') no-repeat top center;
	background-size: cover;
}
div.slice-2:hover{ background-image: url('../images/bckg-module-1-alt.jpg'); }
div.slice-3{
	top: 18%;
	/*left: 33.3333%;*/
	left: 50%;
	background: #65131f url('../images/bckg-module-2.jpg') no-repeat 30% 0;
	background-size: cover;
}
div.slice-3:hover{ background-image: url('../images/bckg-module-2-alt.jpg'); }
div.slice-4{
	top: 18%;
	left: 66.66%;
	background: #111c24 url('../images/bckg-module-3.jpg') no-repeat top center;
	background-size: cover;
}
div.slice-4:hover{ background-image: url('../images/bckg-module-3-alt.jpg'); }
div.slice-5{
	top: 82%;
	left: 0;
	background: #696f78 url('../images/bckg-conclu.jpg') no-repeat bottom center;
	background-size: cover;
}
div.slice-5:hover{ background-image: url('../images/bckg-conclu-alt.jpg'); }
.slice-content{
	position: absolute;
	display: block;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 45px 55px;
	z-index: 200;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
	font: 32px "Geogrotesque", Helvetica, Arial, sans-serif;
}
.slice-content,
.slice-content:hover,
.slice-content:focus{
	outline: none;
	text-decoration: none;
	color: #ffffff;
}
.slice-content:hover{
	-webkit-transform: translateX(15px);
	-moz-transform: translateX(15px);
	-ms-transform: translateX(15px);
	transform: translateX(15px);
}
div.slice-1 .slice-content:hover{ color: #696f78; }
div.slice-2 .slice-content:hover{ color: #c4262e; }
div.slice-3 .slice-content:hover{ color: #65131f; }
div.slice-4 .slice-content:hover{ color: #111c24; }
div.slice-5 .slice-content:hover{ color: #696f78; }
.slice-content h2{
	margin: 0;
	text-transform: uppercase;
	font-size: 36px;
}
.slice-content .num{
	display: block;
	height: 45%;
	font-size: 100px;
	line-height: 0.8em;
}
.ico, .page-index h1 .ico{
	display: inline-block;
	width: 60px;
	height: 54px;
}
h1 .ico{
	width: 36px;
	height: 34px;
}
.ico-index{ background: url('../images/ico-index.png') no-repeat center center; }
.ico-module-1{ background: url('../images/ico-module-1.png') no-repeat center center; background-size: contain; }
.ico-module-2{ background: url('../images/ico-module-2.png') no-repeat center center; background-size: contain; }
.ico-module-3{ background: url('../images/ico-module-3.png') no-repeat center center; background-size: contain; }
div.slice-2 .slice-content:hover .ico-module-1{ background-image: url('../images/ico-module-1-alt.png'); }
div.slice-3 .slice-content:hover .ico-module-2{ background-image: url('../images/ico-module-2-alt.png'); }
div.slice-4 .slice-content:hover .ico-module-3{ background-image: url('../images/ico-module-3-alt.png'); }
@media (max-width: 1200px){
	.slice-content{ padding: 25px; }
	.slice-content h2{ font-size: 28px; }
	.slice-1 h2, .slice-5 h2{ font-size: 36px; }
}
@media (max-height: 800px){
	.slice-content{ padding: 20px; }
	.slice-content h2{ font-size: 28px; }
	.slice-1 h2, .slice-5 h2{ font-size: 36px; }
}
@media (max-width: 768px){
	.slices > div{
		width: 100%;
		height: 20%;
		left: 0;
	}
	div.slice-2{ top: 20%; }
	div.slice-3{ top: 40%; }
	div.slice-4{ top: 60%; }
	div.slice-5{ top: 80%; }
}
@media (max-width: 520px){
	.slice-content{
		padding: 15px;
		font-size: 16px;
	}
	.slice-content h2{ font-size: 16px; }
}
.slices > .slice-expand{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: 100;
}
@keyframes scaleUp{
	from{} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to{
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		opacity: 0;
	}
}
.slices > .slice-expand-item{
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
	opacity: 0;
}
@keyframes scaleDown{
	from{} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to{
		-webkit-transform: scale(0.5);
		-moz-transform: scale(0.5);
		-ms-transform: scale(0.5);
		transform: scale(0.5);
		opacity: 0;
	}
}