/********************************************
	* Domaine : carre-pleyel.fr
	*
	* Exploitant : AG Real Estate
	*
	* Rôle : Feuille de style spécifique contenus page d'accueil 
	*
	* Auteur : Ultra-Fluide, copyright 2021
********************************************/


table{
	border-collapse:collapse;
	table-layout:fixed;
	border:none;
	padding-right: 5%;
	padding-left: 5%;
}
table colgroup col{
	width:34%;
}
table colgroup col:last-child{
	width:32%;
}
table a{
	display:block;
	margin-bottom:5.88235294117647%;
	margin-right:5.88235294117647%;
	transition: transform .8s linear;
	position:relative;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	z-index:0;
	color:white;
	mmix-blend-mode:multiply;
}
table td#cadre a, table td#caracteristiques a{
	margin-right:0;
}
table td#bureaux a, table td#caracteristiques a{
	margin-bottom:0;
}
table td#cadre a{
	margin-bottom:6.25%;
}
table a:before{
	content:" ";
	position:absolute;
	width:100%;
	height:100%;
	bottom:0;
	transition: all .8s linear;
	z-index:5;
}
table td:hover a{
	transform: rotateY(180deg);
}
table img{
	width:100%;
	display:block;
	transition: transform .8s;
	transition-timing-function: steps(2, jump-none);
	z-index:0;
}
table td:hover img{
	transform:  scaleX(-1);
}
table p {
	position:absolute;
	width:100%;
	bottom:0;
	z-index:10;
	opacity: 1;
	transition: opacity .8s linear;
}
table p:last-of-type {
	opacity: 0;
	z-index:15;
	transform: rotateY(180deg);
}
table td:hover p:last-of-type {
	opacity: 1;
}
table td:hover p:first-of-type {
	opacity: 0;
}
table td a p {
	padding:10px 0 0 10px;
	font-weight:600;
}
table td a p:before {
    content: "-";
    display: block;
    font-size: 0;
    line-height: 6px;
    width: 65px;
    margin-bottom: 7px;
}
table td a p strong {
	color:white;
    font-size: 2.5rem;
	font-family:'Oswald', sans-serif;
	text-transform: uppercase;
	text-shadow: 0 0 4px #222;
	line-height:3rem;
}
table td a p span {
    font-size: 1.5rem;
	font-family:'Oswald', sans-serif;
	font-weight:400;
	line-height:2rem;
}
table td#accessibilite a:before{
	background-color:rgba(254, 193, 51, 0.83 );
	mmix-blend-mode: multiply;
}
table td#accessibilite:hover a:before, table td#accessibilite p{
	height:50%;
}
table td#accessibilite a p {
	color:#715211;
}
table td#accessibilite a p:before {
	background:#715211;
}

table td#bureaux a:before{
	background-color:rgba(144, 176, 222, 0.83 );
	mmix-blend-mode: multiply;
}
table td#bureaux:hover a:before, table td#bureaux p{
	height:24%;
}
table td#bureaux a p{
	color:#284879;
}
table td#bureaux a p:before {
	background:#284879;
}

table td#caracteristiques a:before{
	background-color:rgba(50, 183, 188, 0.83 );
	mmix-blend-mode: multiply;
	right:0;
}
table td#caracteristiques:hover a:before{
	width:50%;
}
table td#caracteristiques a p{
	color:#175457;
}
table td#caracteristiques a p:before {
	background:#175457;
}

table td#quartier a:before{
	background-color:rgba(241, 187, 187, 0.83 );
	mmix-blend-mode: multiply;
}
table td#quartier:hover a:before, table td#quartier p{
	height:50%;
}
table td#quartier a p {
	color:#685050;
}
table td#quartier a p:before {
	background:#685050;
}

table td#campus a:before{
	background:url("images/campus-home-off.jpg") center top no-repeat;
}
table td#campus:hover a:before{
	height:0;
}
table td#campus p{
	height:50%;
}
table td#campus a p {
	color:#246e66;
}
table td#campus a p:before {
	background:#246e66;
}

table td#cadre a:before{
	background-color:rgba(185, 212, 109, 0.83 );
	mmix-blend-mode: multiply;
}
table td#cadre:hover a:before, table td#cadre p{
	height:24%;
}
table td#cadre a p{
	color:#465029;
}
table td#cadre a p:before {
	background:#465029;
}
@media screen and (max-width: 900px) {
	table a p {
		font-size:1.05rem;
	}
	table td a p strong {
		color:white;
		font-size: 2.2rem;
		line-height:2.5rem;
	}
	table td a p span {
		font-size: 1.2rem;
		line-height:1.2rem;
	}
	table td#accessibilite:hover a:before, table td#accessibilite p, table td#quartier:hover a:before, table td#quartier p{
		height:80%;
	}
	table td#campus p{
		height:95%;
	}
	table td#bureaux:hover a:before, table td#bureaux p, table td#cadre:hover a:before, table td#cadre p{
		height:34%;
	}
	table td#caracteristiques:hover a:before{
		width:65%;
	}
}