/* bloc */
	.bloc
	{
		position: relative;
		float: left;
		margin: 5px;
		margin-top:  0;
		margin-left: 12px;
		margin-bottom: 20px;
	}

	.bloc-placeholder
	{
		float: left;
		position: relative;
	}

	.bloc-content
	{
		position: relative;
		background-color: #FFF;
		color: #4C4C4E;
		box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
		border:1px solid #D6D6D6;
		overflow: hidden;
		text-align: left;
		padding: 2px;
	}

	.bloc-content.withoutLoading
	{
		background-image: none; 
	}

	.bloc-content.under-construction
	{
		background-image: url("../img/under-construction.png");
	}



	.bloc-content-detail
	{
		height: 50%;
		width: 100%;
		background-color: rgba(43, 43, 43, 0.70);
		position: absolute;
		top: 50%;
		left: 0;
	}

	.bloc-content h2
	{
		text-align: left;
		text-indent: 5px;
	}

	.bloc-content .slide-arrow
	{
		display:inline-block;
		opacity: 0;
		width: 40px;
		text-align: center;
		padding: 0px;
		padding-top: 185px;
		padding-bottom: 20px;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		cursor: pointer;
		position: absolute;
		top: 0;
		margin: 2px;
		z-index: 80;
	}

        .bloc-content .slide-arrow.left {
            background-image: url("//image.akeo.fr/AkeoCommon/UI/arrow-left.png");
            left: 0;
        }

        .bloc-content .slide-arrow.right {
            background-image: url("//image.akeo.fr/AkeoCommon/UI/arrow-right.png");
            right: 0;
            background-position: 20% 50%;
        }


	/* Bloc de taille 1 */

		.bloc.width-1 .bloc-content
		{
			height: 300px;
			width: 138px;
		}
		
		.bloc.width-1 .bloc-content-over-content
		{
			width: 98px;
		}
		
		.bloc.width-1 .bloc-content-over-content h5
		{
			margin-top: 10px;
			margin-bottom: 10px;	
		}
		
		.bloc.width-1 .bloc-content-over-title
		{
			width: 138px;	
		}	
		
	/* Fin bloc 1 */



	/* Bloc de taille 2 */

		.bloc.width-2 .bloc-content
		{
			height: 300px;
			width: 300px;
		}
		
		.bloc.width-2 .bloc-content-over-content.right
		{
			height: 280px;
		}

		.bloc.width-2 .bloc-content-over-title
		{
			width: 300px;	
		}	
		
	/* Fin bloc 2 */

	/* Bloc de taille 3 */

		.bloc.width-3 .bloc-content
		{
			height: 300px;
			width: 462px;
		}

		.bloc.width-3 .bloc-content-over-content.bottom
		{
			width: 422px;
		}
		
		.bloc.width-3 .bloc-content-over-title
		{
			width: 462px;	
		}

	/* Fin bloc 3 */

	/* Bloc de taille 4 */

		.bloc.width-4 .bloc-content
		{
			height: 300px;
			width: 624px;
		}

		.bloc.width-4 .bloc-content-over-content.right
		{
			height: 280px;
		}
		
		.bloc.width-4 .bloc-content-over-title
		{
			width: 624px;	
		}
		
	/* Fin bloc 4 */

	/* Bloc 8 */
		.bloc.width-8
		{
			/*width: 1276px;*/
			/*height: 270px;*/
		}
		
		.bloc.width-8 .bloc-content-over-content.right
		{
			height: 280px;
		}		
	/* Fin Bloc 8 */
		
	/* Bloc de demi hauteur */
		
		.bloc.half-height .bloc-content
		{
			height: 140px;
		}

		.bloc.half-height .bloc-content-over-content.right
		{
			height: 118px;
		}
		
		.bloc.half-height .bloc-content-over-content.right h5
		{
			margin-top: 10px;
			margin-bottom: 10px;
		}
		
		.bloc.half-height .bloc-content-over-call-to-action
		{
			margin-top: 0px;
		}
		
	/* Fin bloc demim hauteur */
	
	.bloc-placeholder.width-2
	{
		width: 310px;
	}
	
	.bloc-placeholder.width-3
	{
		width: 486px;
	}
	
	.bloc-placeholder .bloc-content
	{
		padding-bottom: 0;
	}	

/* Fin bloc */

/* Zone d'affichage au survol */

	.bloc-content-over-title
	{
		
		position: absolute;
		height: 40px;
		width: 100%;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.60);
		opacity: 1:active;
		z-index: 40;
	}
	
	.bloc-content-over-title.top
	{
		top:2px;
		bottom:2px;
	}
	
	.bloc-content-over-title.bottom
	{
		bottom:2px;
		
	}
	
	.bloc-content-over-content
	{
		position: absolute;
		height: 100%;
		width: 100%;
		color: #fff;
		background-color:#000;
		opacity: 0;
		z-index: 30;
		margin: 2px;
		padding: 20px;
		padding-right: 30px;
		padding-top: 0;			
		max-width: 360px;
	}
	
	.bloc-content-over-content.always-visible
	{
		opacity: 1;
		background-color: rgba(0, 0, 0, 0.60);
	}
	
	.bloc-content-over-content.right
	{
		top: 0;
		right: 0;
		width: 0%;
	}
	
	.bloc-content-over-content.always-visible.right
	{
		width:29%;	
	}
	
	.bloc-content-over-content.top
	{
		top: 0;
		left: 0;
		width: 100%;
		height: 0%;
	}
	
	.bloc-content-over-content.bottom
	{
		bottom: 0;
		left: 0;
		width: 100%;
		height: 0%;
	}
	
	.bloc-content-over-content h5
	{
		font-size: 1.5em;
	}
	
	.bloc-content-over-content p
	{
		line-height: 18px;
		font-size: 14px;
	}
	
	.bloc-content-over-content.left
	{
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 0%;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.60);
		opacity: 0;
		z-index: 30;
		
	}
	
	.bloc-content-over-call-to-action
	{
		display: inline-block;
		text-align: right;
		font-weight: bold;
		padding: 10px;
		padding-right: 20px;
		padding-left: 20px;

		position: absolute;
		bottom: 0;
		right: 0px;
		cursor:pointer;
		border:2px solid #fff;
		border-bottom:none;
		border-right:0;
	}

	
	.bloc-content-over-call-to-action a
	{
		text-decoration: none;
		color: #FFF;
	}

/* Fin zone d'affichage au survol */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .bloc.width-1276 .bloc-content,
    .bloc.width-8 .bloc-content {
        /*width: 1016px !important;*/
    }
}

    /*Extra large devices (large desktops, 1200px and up)*/
    @media (min-width: 1200px) {
    }


@media (min-width: 1046px) and (max-width:1280px) {
    .bloc.width-8 .bloc-content-over-content.right {
        height: 220px;
    }
}

@media (min-width: 769px) and (max-width:1045px) {
    .bloc.width-8 .bloc-content-over-content.right {
        height: 155px;
        max-width: 360px;
    }
}