﻿/* tilesVid */

	.tilesVid {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		border-top: 0 !important;
		margin:0;
	}

		.tilesVid + * {
			border-top: 0 !important;
		}

		.tilesVid article {
				margin:0.5em;
			-moz-align-items: center;
			-webkit-align-items: center;
			-ms-align-items: center;
			align-items: center;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-transition: -moz-transform 0.25s ease, opacity 0.25s ease, -moz-filter 1s ease, -webkit-filter 1s ease;
			-webkit-transition: -webkit-transform 0.25s ease, opacity 0.25s ease, -webkit-filter 1s ease, -webkit-filter 1s ease;
			-ms-transition: -ms-transform 0.25s ease, opacity 0.25s ease, -ms-filter 1s ease, -webkit-filter 1s ease;
			transition: transform 0.25s ease, opacity 0.25s ease, filter 1s ease, -webkit-filter 1s ease;
			padding: 1em 1.5em 1em 1.5em ;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			cursor: pointer;
			height: 6vh;
			max-height: 6em;
			min-height: 5em;
			overflow: hidden;
			position: relative;
			/*width: 40%;*/
		}

			
				.vidDescipt {
					display:none;
				}
				a.animlienVid:hover . vidDescipt{
					display:block;

				}
				.tilesVid article:hover > h5{
					display:none;
				}
				
				
		
/*********animation sur les liens CLASS .animlienVid *******************/
.tilesVid .animlienVid {
    display: inline-block;
    color: #fff;
	bottom:5px;
}

.tilesVid a.animlienVid:hover{
	color: #fff;
	}
	
.tilesVid .animlienVid::after {
  display:block;
  content: '';
  	height:15px;
  border-bottom: solid 2px #fff;  
  transform: scaleX(0);  
  transition: transform .5s ease-in-out;
}

.tilesVid .animlienVid:hover::after {
    transform: scaleX(1); 
	}
	
.tilesVid .animlienVid a.fromRight:after{ 
	transform-origin:50% 100% ; 
	}
.tilesVid .animlienVid a.fromLeft:after{
	transform-origin:  50% 0%; 
	}	
	
	
	
	
	
	
		
			.tilesVid article .image {
				display: none;
			}

			.tilesVid article header {
				position: relative;
				text-align:center;
				z-index: 3;
			}

			.tilesVid article h5 {
				font-family: 'Bellerose', Garamond, Sérif;
				font-size: 1em;
				font-weight:100;
				letter-spacing:0.1em;
				padding: 0;
			}
				.tilesVid article h5 a:hover {
					color: inherit !important;
				}
				
			header.major > p .vidDescript {
				text-transform:none;
				font-size: 0.9em;
				line-height: 1.25em;
				margin: 0 0 1em 0;
			}	

			.tilesVid article .link.primary {
				border: 0;
				height: 100%;
				left: 0;
				position: absolute;
				top: 0;
				width: 100%;
				z-index: 4;
				text-align:center;
			}

			.tilesVid article:before {
				-moz-transition: opacity 0.65s ease;
				-webkit-transition: opacity 0.65s ease;
				-ms-transition: opacity 0.65s ease;
				transition: opacity 0.65s ease;
				bottom: 0;
				content: '';
				display: block;
				height: 100%;
				left: 0;
				opacity: 0.85;
				position: absolute;
				width: 100%;
				z-index: 2;
			}

			.tilesVid article:after {
				/*background-color: rgba(36, 13, 67, 0.25);*/
				background-blend-mode: color;
				content: '';
				display: block;
				height: 100%;
				left: 0;
				position: absolute;
				top: 0;
				width: 100%;
				z-index: 1;
			}
			

			.tilesVid article:hover:before {
				opacity: 0;
			}

			.tilesVid article.is-transitioning {
				-moz-transform: scale(0.95);
				-webkit-transform: scale(0.95);
				-ms-transform: scale(0.95);
				transform: scale(0.95);
				-moz-filter: blur(0.5em);
				-webkit-filter: blur(0.5em);
				-ms-filter: blur(0.5em);
				filter: blur(0.5em);
				opacity: 0;
			}


			

				
			.tilesVid article:nth-last-child(1):before {
				background-color: #87c5a4; 
			}

			.tilesVid article:nth-last-child(2):before {
				background-color: #785e44;
			}

			.tilesVid article:nth-last-child(3):before {
				background-color: #375863;
			}

			.tilesVid article:nth-last-child(4):before {
				background-color: #a2574d;
			}

			.tilesVid article:nth-last-child(5):before {
				background-color: #ebb86d;
			}

			.tilesVid article:nth-last-child(6):before {
				background-color: #a18fbb;
			}
			
			.tilesVid article:nth-last-child(7):before {
				background-color: #ab5c89;
			} 
			
			.tilesVid article:nth-last-child(8):before {
				background-color: #96bac1;
			}

	

		@media screen and (max-width: 1280px) {
			.tilesVid article {
				padding: 1em 1.5em 1em 1.5em ;
				height: 6vh;
				max-height: 6em;
				min-height: 5em;
				max-width:17em;
				min-width:12em;
			}
		}

		@media screen and (max-width: 980px) {
			.tilesVid article {
				height: 6vh;
				max-height: 6em;
				min-height: 5em;
				max-width:16em;
				min-width:11em;
			}
		}
		
		@media screen and (max-width:770px){
		.tilesVid article h5 {
			line-height:1.45em;
			}
			.tilesVid article {
			max-width:15em;
			min-width:10em;
			}
		}

		@media screen and (max-width: 736px) {
			.tilesVid article {
				padding: 1em 1.35em 1em 1.35em ;
				height: 6vh;
				max-height: 6em;
				min-height: 5em;
				max-width:14em;
				min-width:9em;
			}
			.tilesVid article h3 {
				font-size: 1.2em;
			}
		}
		
		@media screen and (max-width:640px){
			.tilesVid article h5 {
			line-height:1.4em;
			}
			
			.tilesVid article {
			text-align:center;
			padding: 1em 1em 1em 1em ;
			max-width:13em;
			min-width:13em;
			}
		}
		


		@media screen and (max-width: 580px) {
			.tilesVid {
				display: block;
			}
			.tilesVid article {
				display:block;
				padding: 1.2em 1em 1em 1em ;
				text-align:center;
				max-width: 100%;
			}
		}