@import url('https://fonts.googleapis.com/css?family=Raleway');

body { 
	background-image: url("images/metro/home_bg_blue.jpg"); 
	background-size: cover;
	background-attachment: fixed;
}
p { margin: 0; }
img.single-image { width: 100%; height: auto; }


/*-------------------*/
@keyframes AutoSlide2 {
	0%, 47%, 100% {
		left: 0px; /*1ère image*/
	}
	50%, 97% {
		left: -100%; /*2ème image*/
	}
}
#slideshow {
	position: relative;
	width: 100%;
	height: auto;
//	margin:  0;
//	overflow: hidden;
}
#sContent {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 200%;
	height: auto;
	margin: 0;            
	padding: 0;
//	overflow: hidden;
	
	/*CSS3 keyframes animation*/
	animation-name: AutoSlide2;
	animation-duration: 8s;
//	animation-delay: 8s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
#sContent img {
	height: auto;
//	max-width: 240px;
	vertical-align: middle;
}


/*--- text style for the (inserted) title ---*/
.metro p.title {
  display: block!important;
  color: #ffffff;
  font-family: Raleway;
  font-weight: 600;
  font-size: calc((1vw * 0.6) + 11px);
  text-align: right;
  padding: 20px 7px 10px 10px;
  margin: 0 0 auto 0;
  line-height: 1.1;
}

/*--- text style for any slide (verticaly and horizontaly centered) ---*/
.metro .text {
  color: white;
  font-family: Raleway;
  font-weight: 500;
  font-size: calc((1vw * 0.6) + 9.8px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1.1;
}

/*--- (partial) slide on hover (from bottom) ---*/
.metro .slide-on-hover {
  position: relative;
  width: 100%;
}

.metro .image {
  display: block;
  width: 100%;
  height: auto;
}

.metro .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(6, 136, 149, 0.82);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.metro .slide-on-hover:hover .overlay {
  height: 31%;
}

/*--- automated slide ---*/

@keyframes autoslide-right-to-left {
	0%, 47%, 100% {
		left: 100%; /* nothing */
	}
	50%, 97% {
		left: 0px; /* overlay */
	}
}
.slide-automated {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.slide-automated .image {
	display: block;
	width: 100%;
	height: auto;
}

.slide-automated .overlay {
	position: absolute;
	bottom: 0;
	top: 0;
	right: 0;
	background: rgba(233, 103, 45, 0.82);
	width: 100%;
	height: 100%;
	overflow: hidden;
  	/* CSS3 keyframes animation */
	animation-name: autoslide-right-to-left;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}



/*--- desktop mapping---*/
.tablet,
.phone { display: none; }

table.metro {
	width: auto;
	margin: 60px auto 45px auto;
	border: 0;
}

table.metro td,
table.metro th {
	border: 0;
	min-width: 110px;
	width: calc(100vw / 8);
	max-width: 160px;
	min-height: 110px;
//	height: calc(100vw / 8);
	max-height: 160px;
	vertical-align: top;
	padding: 0;
	margin: 0;
	overflow: hidden;
}
table.metro p.title {
	height: calc(12.5vw);
	min-width: 110px;
	min-height: 110px;
	max-height: 160px;
}
// table.metro tr { max-height: 150px; }
	
/*--- tablet mapping ---*/
@media (max-width: 768px) {
	.desktop,
	.phone { display: none; }
	.tablet { display: inherit; }
	table.metro td,
	table.metro th {
		width: calc(17vw);
		height: calc(17vw);
		min-width: 110px;
		min-height: 110px;
	}
	table.metro p.title {
		height: calc(17vw);
		min-width: 110px;
		min-height: 110px;
	}
}

/*--- phone mapping ---*/
@media (max-width: 480px) {
	.desktop,
	.tablet { display: none; }
	.phone { display: inherit; }
	table.metro td,
	table.metro th {
		width: calc(28vw);
		height: calc(28vw);
		min-width: 100px;
		min-height: 100px;
	}
	table.metro p.title {
		height: calc(28vw);
		min-width: 100px;
		min-height: 100px;
	}
}