/* = CORPS DE PAGE = */
/** == CONTENU DU SITE == **/
/*** === PATCHWORK DES PRODUITS === ***/
#visual-quickaccess{
	position:relative;
	margin-bottom:20px;
}
/**** ==== ITEMS ==== ****/
#visual-quickaccess .items{
	margin-left:-5px; 
	margin-right:-5px;
}
#visual-quickaccess .items > li{
	position:relative;
	display:block;	
	float:left;
	margin-bottom:10px;
}
#visual-quickaccess .items > li > a{
	position: absolute;
	top: 0; 
	right: 5px;
	bottom: 0; 
	left: 5px;
	display:block;				    
	overflow:hidden;
}
/**** ==== DECLINAISON LARGEUR ==== ****/
#visual-quickaccess .items > li.third-width{
	width:33.33333%;
}
#visual-quickaccess .items > li.sixth-width{
	width:16.66667%;
}
/**** ==== GESTION DE RATIO ==== ****/
#visual-quickaccess .items > li:before {
    content: " ";
    display: block;
}
#visual-quickaccess .items > li.full-height:before,
#visual-quickaccess .items > li.half-height:before{
	margin-top: 128%;
}
#visual-quickaccess .items > li:first-child:before {
	margin-top: -webkit-calc(128% + 11px);
	margin-top: -moz-calc(128% + 11px);
	margin-top: calc(128% + 11px);
}
#visual-quickaccess .items > li.third-width.half-height:before{
	margin-top: 64%;
}
#visual-quickaccess .items > li.sixth-width.half-height::before {
	margin-top: 128%;
	margin-top: -webkit-calc(128% + 1px);
	margin-top: -moz-calc(128% + 1px);
	margin-top: calc(128% + 1px);
}
/**** ==== FOND IMAGE ==== ****/
#visual-quickaccess .items > li > a > .background{
	position:absolute;
	top:0; 
	left:0; 
	bottom:0; 
	right:0;
	background-color:#E4E4E4;
	background-attachment: scroll;
  	background-repeat:no-repeat;
  	background-position:center;
	-webkit-background-size: 	cover; /* pour Chrome et Safari */
	-moz-background-size: 		cover; /* pour Firefox */
	-o-background-size: 		cover; /* pour Opera */
	background-size: 			cover; /* version standardisée */
}
/**** ==== FOND DES TEXTES ==== ****/
#visual-quickaccess .items > li > a > .background-color{
	position:absolute;
	display:block;
	z-index:2;
	left:0; bottom:0; right:0;
	top:100%;
	margin-top:-5px;
}
/**** ==== TITRE ==== ****/
#visual-quickaccess .items > li > a .title{
	position:absolute;
	left:0; bottom:10px; right:0;	
	height:2em; 
	line-height:2em;
	padding:0 10px;
	margin:0;	
	color:#FFF;
	text-transform:uppercase;	
	font-weight:400;
	z-index:5;
}
#visual-quickaccess .items > li.full-height .title{
	font-size:26px;
}
#visual-quickaccess .items > li.half-height .title{
	font-size:18px;
}
#visual-quickaccess .items > li > a .title span{
	display: inline-block;
    line-height: 1;
    vertical-align: bottom;
}
/**** ==== EXTRAIT ==== ****/
#visual-quickaccess .items > li > a .excerpt{
	position:absolute;
	left:0; bottom:-100%; right:0;
	text-transform:none;	
	overflow:hidden;
	line-height:1.4;
	max-height: 4.2em;
	padding:0 10px;
	margin:0;
	font-size:14px;
	font-weight:400;
	color:#FFF;
	z-index:5;
}
#visual-quickaccess .items > li.half-height > a .excerpt{
	font-size:12px;
}
/**** ==== BOUTON DE SUIVI DE LECTURE ==== ****/
#visual-quickaccess .items > li a .readmore{
	position:absolute;
	display:inline-block;
	bottom:-100%;
	right:10px;
	z-index:5;
	border:none;
	text-transform:none;
	overflow:hidden;
	font-size:15px;
	font-weight:400;
	color:#FFF;
	padding:10px;
}
#visual-quickaccess .items > li.new a .readmore{
	background-color:#293848;
}
#visual-quickaccess .items > li.half-height a .readmore{
	font-size:12px;
	padding:5px;
}
/**** ==== PLAYER VIDEO ==== ****/
#visual-quickaccess .items > li > a .video{
	position:absolute;
	top:50%; left:50%;
	font-size:80px;
	margin-top:-40px; margin-left:-40px;
	line-height:1;
	z-index:1;
	color:#FFF;
	display:none;
}
#visual-quickaccess .items > li > a .video.active{
	display:inline-block;
}
body #video-overlay{
	position:fixed;
	top:0; right:0; bottom:0; left:0;
	background-color: rgba( 0, 0, 0, 0.8 );
	z-index: 100000;
	display:none;
}
#visual-quickaccess .items > li > .video-container{
	position:absolute;
	top:0; right:0; bottom:0; left:0;
	background-color:#000000;
	z-index: 100001;
	display:none;
	text-align:center;
}
body #video-overlay.active,
#visual-quickaccess .items > li > .video-container.active{
	display:inherit;
}
/**** ==== ANIMATION AU SURVOL ==== ****/
#visual-quickaccess .items > li.full-height > a:hover .background-color{
	top:245px;
}
#visual-quickaccess .items > li.half-height > a:hover .background-color{
	top:60px;
}
#visual-quickaccess .items > li.full-height > a:hover .title{
	bottom:170px;
}
#visual-quickaccess .items > li.half-height > a:hover .title{
	bottom:130px;
}
#visual-quickaccess .items > li.full-height > a:hover .excerpt{
	bottom:100px;
}
#visual-quickaccess .items > li.half-height > a:hover .excerpt{
	bottom:70px;
}
#visual-quickaccess .items > li.full-height > a:hover .readmore{
	bottom:15px;
}
#visual-quickaccess .items > li.half-height > a:hover .readmore{
	bottom:10px;
}
#visual-quickaccess .items > li > a:hover,
#visual-quickaccess .items > li.full-height > a:hover,
#visual-quickaccess .items > li.half-height > a:hover{
	border-bottom-color:transparent;
}
#visual-quickaccess .items > li > a .background-color{
	-webkit-transition: 	top 300ms ease-in-out;
    -moz-transition: 		top 300ms ease-in-out;
    -ms-transition: 		top 300ms ease-in-out;
    -o-transition: 			top 300ms ease-in-out;
    transition: 			top 300ms ease-in-out;
}
#visual-quickaccess .items > li > a .title{
	-webkit-transition: 	bottom 300ms ease-in-out;
    -moz-transition: 		bottom 300ms ease-in-out;
    -ms-transition: 		bottom 300ms ease-in-out;
    -o-transition: 			bottom 300ms ease-in-out;
    transition: 			bottom 300ms ease-in-out;
}
#visual-quickaccess .items > li > a .excerpt{
	-webkit-transition: 	bottom 300ms ease-in-out;
    -moz-transition: 		bottom 300ms ease-in-out;
    -ms-transition: 		bottom 300ms ease-in-out;
    -o-transition: 			bottom 300ms ease-in-out;
    transition: 			bottom 300ms ease-in-out;
}
#visual-quickaccess .items > li > a .readmore{
	-webkit-transition: 	bottom 300ms ease-in-out;
    -moz-transition: 		bottom 300ms ease-in-out;
    -ms-transition: 		bottom 300ms ease-in-out;
    -o-transition: 			bottom 300ms ease-in-out;
    transition: 			bottom 300ms ease-in-out;
}

/* = RESPONSIVE = */
/** = COL-MD = **/
@media (max-width: 1199px){
	/* = CORPS DE PAGE = */
	/** == CONTENU DU SITE == **/
	/*** === PATCHWORK DES PRODUITS === ***/
	/**** ==== ITEMS ==== ****/
	#visual-quickaccess .items > li.full-height .title{
		font-size:20px;
	}
	#visual-quickaccess .items > li.half-height .title{
		font-size:15px;
	}
	#visual-quickaccess .items > li.full-height > a .excerpt{
		font-size:12px;
	}
	#visual-quickaccess .items > li.half-height > a .excerpt{
		font-size:11px;
		line-height:1.1;
		max-height:4.4em;
	}
	#visual-quickaccess .items > li.full-height > a:hover .background-color{
		top:170px;
	}
	#visual-quickaccess .items > li.half-height > a:hover .background-color{
		top:30px;
	}
}
/** = COL-SM = **/
@media (max-width: 991px){
	/* = CORPS DE PAGE = */
	/** == CONTENU DU SITE == **/
	/*** === PATCHWORK DES PRODUITS === ***/
	/**** ==== ITEMS ==== ****/
	#visual-quickaccess .items > li.full-height .title{
		font-size:15px;
	}
	#visual-quickaccess .items > li.half-height .title{
		font-size:14px;
	}
	#visual-quickaccess .items > li.full-height > a .excerpt{
		font-size:12px;
	}
	#visual-quickaccess .items > li.full-height a .readmore{
		font-size:11px;
		padding:2px 5px;
	}
	#visual-quickaccess .items > li.half-height a .readmore{
		font-size:11px;
		padding:2px 5px;
	}
	#visual-quickaccess .items > li.full-height > a:hover .background-color{
		top:135px;
	}
	#visual-quickaccess .items > li.half-height > a:hover .background-color{
		top:25px;
	}
	#visual-quickaccess .items > li.full-height > a:hover .title{
		bottom:120px;
	}
	#visual-quickaccess .items > li.half-height > a:hover .title{
		bottom:90px;
	}
	#visual-quickaccess .items > li.full-height > a:hover .excerpt{
		bottom:50px;
	}
	#visual-quickaccess .items > li.half-height > a:hover .excerpt{
		bottom:40px;
	}
	#visual-quickaccess .items > li.full-height > a:hover .readmore{
		bottom:10px;
	}
	#visual-quickaccess .items > li.half-height > a:hover .readmore{
		bottom:5px;
	}
}
/** = COL-XS = **/
@media (max-width: 767px){
	/* = CORPS DE PAGE = */
	/** == CONTENU DU SITE == **/
	/*** === PATCHWORK DES PRODUITS === ***/
	/**** ==== DECLINAISON LARGEUR ==== ****/
	#visual-quickaccess .items > li.third-width{
		width:50%;
	}
	#visual-quickaccess .items > li.sixth-width{
		width:50%;
	}
	#visual-quickaccess .items > li:first-child,
	#visual-quickaccess .items > li.third-width.half-height{
		width:100%;
	}
	/**** ==== ITEMS ==== ****/
	#visual-quickaccess .items > li.full-height .title,
	#visual-quickaccess .items > li.half-height .title{
		font-size:19px;
	}
	#visual-quickaccess .items > li.full-height > a .excerpt,
	#visual-quickaccess .items > li.half-height > a .excerpt{
		font-size:14px;
	}
	#visual-quickaccess .items > li.full-height a .readmore,
	#visual-quickaccess .items > li.half-height a .readmore{
		font-size:14px;
		padding:10px;
	}
	#visual-quickaccess .items > li.full-height > a:hover .background-color,
	#visual-quickaccess .items > li.half-height > a:hover .background-color{
		top:45%;
	}
	#visual-quickaccess .items > li.full-height > a:hover .title,
	#visual-quickaccess .items > li.half-height > a:hover .title{
		bottom:40%;
	}
	#visual-quickaccess .items > li.full-height > a:hover .excerpt,
	#visual-quickaccess .items > li.half-height > a:hover .excerpt{
		bottom:20%;
	}
	#visual-quickaccess .items > li.full-height a:hover .readmore,
	#visual-quickaccess .items > li.half-height a:hover .readmore{
		bottom:10px;
	}		
}
/** = WP ADMINBAR RESPONSIVE = **/
@media (max-width: 600px){
	/* = CORPS DE PAGE = */
	/** == CONTENU DU SITE == **/
	/*** === PATCHWORK DES PRODUITS === ***/
	/**** ==== ITEMS ==== ****/
	#visual-quickaccess .items > li.full-height .title,
	#visual-quickaccess .items > li.half-height .title{
		font-size:15px;
	}
	#visual-quickaccess .items > li.full-height > a .excerpt,
	#visual-quickaccess .items > li.half-height > a .excerpt{
		font-size:12px;
	}	
}
/** = WP ADMINBAR RESPONSIVE = **/
@media screen and (max-width: 480px){
	/* = CORPS DE PAGE = */
	/** == CONTENU DU SITE == **/
	/*** === PATCHWORK DES PRODUITS === ***/
	/**** ==== DECLINAISON LARGEUR ==== ****/
	#visual-quickaccess .items > li.third-width,
	#visual-quickaccess .items > li.sixth-width{
		width:100%;
	}
	/**** ==== ITEMS ==== ****/
	#visual-quickaccess .items > li.full-height .title,
	#visual-quickaccess .items > li.half-height .title{
		font-size:14px;
	}
	#visual-quickaccess .items > li.full-height > a .excerpt,
	#visual-quickaccess .items > li.half-height > a .excerpt{
		font-size:12px;
	}	
}